less

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);}