Less的基本⽤法⼀、Less简介
less是⼀门CSS的预处理语⾔
less是⼀个css的增强版，通过less可以编写更少的代码
实现更强⼤的样式
在less中添加了许多新特性，像对变量的⽀持、对mixin的⽀持....
less的语法⼤体上和css语法⼀直，但less中增加了许多对css扩展
浏览器⽆法直接执⾏less代码，要执⾏必须先将less转换为css再由
浏览器执⾏
Less也是⼀种动态样式语⾔. 对CSS赋予了动态语⾔的特性，
如变量，继承，运算，函数. Less 既可以在客户端上运⾏ (⽀持IE 6+, Webkit, Firefox)，
也可在服务端运⾏ (借助 Node.js)。
⼆、Less的基本⽤法
1、变量
background-color: #bbffaa;
.box2{
background-color: red;
.box4{
background-color: blue;
}
}
.box3{
background-color: orange;
}
}
// 变量：在变量中可以存储⼀个任意的值css变量
// 并且可以在需要时，任意改变变量的值
//变量的语法：@变量名
@a:100px;
@b:#bfa;
@c:box6;
.box5{
// 使⽤变量时如果是直接使⽤则以@变量名的形式使⽤即可    width: @a;
color: @b;
}
// 作为类名或者⼀部分值使⽤时必须以@{变量名}的形式使⽤.@{c}{
width: @a;
background-image: url("@{c}/1.png");
}
@d:200px;
@d:300px;
// 就近原则下⾯d为300px
div{
// 变量发⽣重名时，会优先使⽤⽐较近的变量
width: @d;
height: @e;
}
// 可以在变量声明前就使⽤变量
@e:335px;
div{
width: 300px;
// 取和width相同的值
height: $width;
}
2、嵌套
.box2{
color: red;
}
>.box3{
color: red;
&:hover{
color: red;
}
}
// 为box1设置hover
// &表⽰外层⽗元素
&:hover{
color: red;
}
}
3、extend和mixins
p1{
width: 100px;
height: 200px;
}
// extend对当前选择器扩展指定选择器的样式（选择器分组）
.p2:extend(.p1){
color: red;
}
.p3{
// 直接对指定的样式进⾏引⽤，这⾥就相当于将p1的样式在这⾥进⾏了复制
//mixin混合
.p1();
}
// 使⽤类选择器时可以在选择器后添加⼀个括号，这时实际上我们就创建了⼀个mixins .p4(){
width: 100px;
height: 100px;
}
.p5{
.
p4();
}
.p5{
.p4;
}
4、混合函数
// 混合函数混合函数中可以直接设置变量
.test(@w:100px,@h:200px,@bg-color:red){
width: @w;
height:@h;
border: 1px solid red;
background-color: @bg-color;
}
div{
// 调⽤混合函数按顺序传递
// .test(200px,300px,#bfa);
// .test(@bg-color:red, @h:100px, @w:200px)
.test(300px);
}
三、Less的其他⽤法
span{
// average取颜⾊的平均值
color: average(red,yellow);
}
body:hover{
// darken加深颜⾊
background-color: darken(#bfa,20%);
}
//将其他的less引⼊到当前less中
@import "syntax2.less";
.box1{
// 在less中所有的数值都可以直接进⾏运算// + - * /
width: 100px/2;
height: 100px*2;
background-color: #bbffaa;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。