less

1、Escaping(注释)

/*css会出现注释*/
//css不会出现注释

2、变量(Variables) 用@定义变量

@test_width:300px;
.box{
width:@test_width;
height:@test_width;
background-color:yellow;
}

3、混合(Mixins) (有参数时调用的时候加括号，没有不需要加)（“混合”）一个规则集合应用到另一个规则集合中。

.border{
border:solid 5px pink;
}
//我们想要将这些属性应用到别的规则集合中
.box2{
.border;
margin:0 auto;
width:100px;
height:100px;
}
//混合 可带参数,当传入俩个参数时，可以用逗号或分号分开，当混合带有括号时，仅供调用，不会输出css

.border2(@border_width){
border:@border_width solid black;
}

.testBorder2{
.border2(3px);
}
//混合 默认带值
.border3(@border_width:10px){
border:@border_width solid yellow;
}
.testBorder3{
.border3();
}

4、/*//嵌套(nested) 最有意思 其中li a span 放在同级比较好 因为这样生成的css代码不会嵌套很多父级

//& 代表父级选择器& represents the current selector parent
//Less gives you the ability to use nesting instead of, or in combination with cascading.
//Less给你的能力，而不是使用嵌套，或结合级联。*/
.list{
width:500px;
margin:30px auto;
padding:0;
list-style:none;
li{
height:30px;
line-height:30px;
background-color:pink;
margin-bottom:5px;
padding:0 10px;
}
a{
float:left;
&:hover{
color:red;
}
}
span{
float:right;
}
}