注释: /**/在编译后的文件里是保留的
//在编译后的文件里没有
变量: @变量名:值;
比如 @width:100px;
.box{
width:@width;
}
混合: .box{
with:100px;
height:100px;
.border;
}
.border{
border:1px solid red
}
混合(带参数带值):
.box {
with:100px;
height:100px;
.border(10px);
}
.border(@width:1px) {
border:@width solid red
}
也可以只带参数不带值,但这样的话 .border 就仅仅是一个模板,不起实际作用了,另外,如果只带参数,那么引用的时候必须填值,如果带参数带值,可以.border()
匹配模式:
.boxOne {
.border(second,10px)
}
.border(first) {
border:1px solid red
}
.border(second,@width) {
border:@width solid red
}
.border(@_,@width) {
color:white;
}
运算: @width:100px;
.border{
width:@width + 20
}
20可以带单位px,也可以不带单位,两个只要一个带单位就可以
嵌套: a{
color:white;
&:hover{
color:red;
}
span{
width:10px;
}
}