less

注释

//编译后不在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 代表所有传递的 参数，当传入的参数都直接使用的时候可以用，减少代码