注释：
以//开头的注释不会被编译到CSS文件中
被/**/包裹的注释会被编译到CSS文件
变量：
使用@来声明一个变量：属性值 @color：gray;属性名 @m:margin;选择器 @selector:#box
延迟加载是当一个作用域的代码全部解析完，才去加载@var
.class{ @var:1 m:@var //3 @var:3 }
嵌套规则：
&表示上一级选择器，可用于伪元素
若想表示 .box:hover，直接将:hover嵌套于.box得到的CSS为.box :hover(有空格)
正确写法：
.box{ &:hover{} }
混合：
将一系列属性抽取出来，可在任意元素中调用；
1. 普通混合 会在CSS中输出
.base{
display:absolute;
width:100px;
height:100px;
}//会在编译后的CSS中出现
.box1{
.base;
}
.box2{
.base;
}
2. 不输出的混合“（）” 不会存在于CSS中
.base(){ display:absolute; width:100px; height:100px; }//不会在编译后的CSS中出现 .box1{ .base; } .box2{ .base; }
3. 带参数的混合
LESS文件
.base(@w：50px,@h：50px){//默认值@w: 50 @h: 50 display: absolute; width: @w; height: @h; } .box1{ .base(100px,100px); } //为传参，使用默认值 .box2{ .base(); } //命名参数 .box3{ .base(@w:200px); }
CSS文件
.box1{ width:100px; height:100px; } .box2{ width:50px; height:50px; }
4. 模式匹配
LESS文件
.pos(r){ display: relative; } .pos(a){ display: absolute; } .pos(f){ display: fix; } .pos(@_){ width: 100px; height: 80px; } .box1{ .pos(r); .box2{ .pos(a); } }
CSS文件
.box1{ width: 100px; height: 80px; display: relative; } .box1 .box2{ width: 100px; height: 80px; display: absolute; }
运算：
不需要都带单位，有一个带了即可
width: 100px + 10 =>width:110px
原文：https://www.cnblogs.com/embrace-ly/p/10746962.html