less is more , than css
less使用到的编译工具: koala
less使用的软件: sublime text(推荐使用)
在less 中注释使用的是// ( /**/是会被编译的)
less中变量的声明使用: @
如:
@w : 20px; @h : 50px;
调用 :
.box{ width : @w; height : @h; }
混合:
border{
border : 1px solid red;
box_2 { .box; //调用上面的box
margin : 0 auto;
}
混合-可带参数:
border_02(@b_w){
border : @b_w solid red;
} //调用
text_maix{
border_02(20px);
}
混合-可带参数默认值:
border_03(@b_w : 10){
border : @b_w solid red;
}
匹配模式:相当于js中的if(未插入代码)
运算: 可以进行加减乘除的运算(未插入代码)
嵌套:尽量减少嵌套的层数。如以下的a要嵌套在哪里,是在ul下还是在li下,需要做一定的考量,标准是:尽量禁烧嵌套的层数。
&表示上一层选择器。如下代码,它表示的是 a
ul{
width : 500px; li{ margin :; } a{ color : red;
& :hover{ color : green;}
}
}
@argument 传入的参数太多,在使用时不想写那么多的参数,只需一个@argument即可,这样既可以省事也可以减少不必要的错误。
border_arg(@w: 20px, @c : red, @x : solid){
border: @argument;
}
避免编译: 有些内容不应该由这个软件编译掉就可以用 “~”表示该段内容不要编译
text_03{
width : ~"clc(300px-20px)";
}
!important (一般不推荐使用,容易造成问题)
text_important{
border_radius() !important;
}