less
来源：互联网 发布：优化软件排行榜 编辑：程序博客网 时间：2024/05/21 01:53
1.注释
/**/这种注释编译后css中被保留
//不保留
2.变量@
3嵌套 dom结构
.div{
a{
&:hover{
}}
&-abc{}
}
4混合
.div{
width:330px;
.hh;
.hh_02(30px);
.hh_03();
}
.hh{height:40px;}
混合可带参数（函数式编程）
.hh_02(@border_width){border:solid yellow @border_width}
混合默认值
.hh_03(@border_width:10px){border:solid yellow @border_width}
5匹配模式
.sanjiao{
.triangle(top);
}
.triangle(top,@w:5px,@c:#ccc){
border-width:@w;
border-color:transparent transparent@c transparent
border-style:dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
border-width:@w;
border-color:@c transparent transparent transparent
border-style:solid dashed dashed dashed;
}
// 无论选择哪一个，都会把这个样式带上
.triangle(@_,@w:5px,@c:#ccc){
width:0;
height:0;
overflow:hidden;
}
6运算
@test_01:300px;
.box_02{
width:（@test_01+20）*5;(有一个带单位也可以)
}
7@arguments
.border_arg(@w:30px,@c:red,@xx:solid){
border:@arguments
}
.test_arguments{
.border_arg(40px);}
