LESS
总体而言，想象成JS的JQ就行
1.less的注释
/*text*/ 该注释能够编译到css文件中
//text 该注释不能编译到css文件中
2.定义变量
eg：
@:nav_width：300px；
body{
width:@:nav_width
}
3.混合
eg(混合的一个声明):
.border{
border:solid 5px pink;
}
.box{
width:300px;
height:300px
.border;
}
带参数的混合
.border02(@border_width){
border:solid @border_width pink;
}
.text{
.border02(30px);
}
混合带默认值
.border03(@border_width:5px){
border:solid @border_width pink;
}
//这是带默认值的
.text{
.border03();
}
//需要修改默认值的
.text{
.border03(30px);
}
4.匹配模式
.triangle(top,@w:5px,@c:#ccc){
border_width:@w;
border_color:transparent transparebt @c transparent;
border_style:dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
border_width:@w;
border_color:@c transparent transparebt transparent;
border_style:dashed dashed solid dashed;
}
.triangle(left,@w:5px,@c:#ccc){
border_width:@w;
border_color:transparent @c transparebt transparent;
border_style:dashed solid dashed dashed;
}
.triangle(right,@w:5px,@c:#ccc){
border_width:@w;
border_color:transparent transparebt transparent @c;
border_style:dashed dashed dashed solid;
}
//不论匹配到谁都需要带着@_
.trangle{@_,@w:5px,@c:#ccc){
.triangle(top,100px);
width:0;
height:0;
overflow:hidden;
}
.sanjiao{
.trangle(top,5px，pink)
}
5.运算
@text01{
width:320px;
}
.box01{
width:@text01+30;
}
6.嵌套
&对伪类使用
对连接的使用
&item
.list{
margin:5px;
li{
width:50px;
}
a{
text.decoration:none;
//代表他的上一层选择器，即a
&:hover{
color:red;
}
}
}
7.@arguments变量
.border_arg(@w:30px,@c:red,@xx:solid){
border:@arguments
}
.text{
.border_arg();
}
8.其他
1)避免编译
~"" or ~'' 不变的输出，滤镜
.text_03{
width:~"cale(300px-30px)";
}
2) ！important 优先级最高
.text{
.border03() improtant;
}
网友评论