注释
//编译后不在css文件中 /**/编译后存在css文件中
变量
@定义变量
混合
已经声明好的样式将选择器写入另一个样式中,如:
@test_width:300px;
@test_height:300px;
.border{
border:1px solid red;
}
.box{
width:@test_width;
height:@test_height;
.border;
}
带参数的:
.border_test(@border_width){
border:1px solid @border_width;
}
.test{
.border_test(30px)
}
参数存在默认值:
.border_test1(@border_width:10px){
border:1px solid @border_width;
}
.test1{
.border_test1();
}
匹配模式
根据传入的参数匹配:
.triangle(top,@w:5px,@c:#FFF){
border-width:@w;
border-color:transparent transparent red transparent;
}
.triangle(bottom,@w:5px,@c:#FFF){
border-width:@w;
border-color:red transparent transparent transparent;
}
.triangle(left,@w:5px,@c:#FFF){
border-width:@w;
border-color:transparent red transparent transparent;
}
.triangle(right,@w:5px,@c:#FFF){
border-width:@w;
border-color:transparent transparent transparent red;
}
.triangle(@_,@w:5px,@c:#FFF){
width:0;
height:0;
pverflow:hidden;
}//表示編譯後都帶的樣式
.sanjiao{
.triangle(top,10px);
}
运算
.box{
width:@test_width-200;
height:(@test_height-10)*2;
.border;
color:#ccc-10;
}
嵌套
.list{
width:200px;
li{width:100%;}
.a{
color:green;
&:hover{color:blue;}
}
.span{display:inline-block;}
}
&代表上一层选择器
@arguments 代表所有传递的 参数,当传入的参数都直接使用的时候可以用,减少代码