less小结

1、注释 //或者// 区别是//会编译到css里，而//不会
2、变量 @my_width: 300px;(@变量名:值;)
例子：
@my_width: 300px;
body{
width: @my_width;
}
3、混合(重用已存在样式)
例子
.test_div {
width: 200px;
height: 200px;
background: red;
.border;
}
.border {
border: 1px solid #000;
}
4、混合(带参数)
.test_div {
width: 200px;
height: 200px;
background: red;
.border(5px);
}
.border(@border_width) {
border: @border_width solid #000;
}
5、混合(默认参数)
.test_div {
width: 200px;
height: 200px;
background: red;
.border(5px);
}
.border(@border_width: 10px) {
border: @border_width solid #000;
}
6、匹配模式
.pos(r) {
position: relative;
}
.pos(a) {
position: absolute;
}
.pos(f) {
postition: fixed;
}
.text_div {
width: 200px;
height: 200px;
.pos(a);
}
7、运算
@test_width {
width: 300px;
}
.text_div {
width: (@test_width-50)*10;
}
8、嵌套 &代表上一层选择器
9、argunments
.test_div {
width: 200px;
height: 200px;
background: red;
.border();
}
.border(@border_width:5px,@border_style:solid,@border_color:#fff) {
border: @argunments;
}
10、避免编译(处理less编译器不识别的语法，原封不动输出)
.text_div {
width: ~'calc(300px - 30px)';
}