Less （Leaner Style Sheets 的缩写）是一门向后兼容的 CSS 扩展语言。因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。

1.less中的注释

以//开头的注释，不会被编译到css文件中；以 /**/ 包裹的注释会编译到css文件中；

2.less中的变量

less中变量的声明，是通过@，比如：@color:pink;@abc:10px;等等

1.作为普通属性值来使用直接@pink

2.作为选择器和属性名：#@{selector的值}的形式

3.作为URL:@{url}

4.变量的延迟加载

3.less中的嵌套规则

less中的嵌套有两种：普通的嵌套和&的使用

4.less中的混合(重要)

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

1.普通的混合，会编译到css文件中

2.不带输出的混合，不会编译到css文件中,只需在混合后加上()

3.带参数的混合

4.带默认参数的混合

5.混合的匹配模式（三角形案例）

triangle.less
/*混合的匹配模式*/
.triangle(@_,@w,@c){
    width: 0px;
    height: 0;
    overflow: hidden;
}
.triangle(L,@w,@c){
    border-width: @w;
    border-style: dashed solid dashed dashed;
    border-color: transparent @c transparent transparent;
}
.triangle(R,@w,@c){
    border-width: @w;
    border-style: dashed  dashed dashed solid;
    border-color: transparent  transparent transparent @c;
}
.triangle(T,@w,@c){
    border-width: @w;
    border-style: dashed  dashed solid dashed;
    border-color: transparent transparent @c transparent;
}
.triangle(B,@w,@c){
    border-width: @w;
    border-style: solid dashed  dashed dashed;
    border-color:  @c transparent transparent transparent;
}

@import "triangle.less";

#wrap .innerBox{
    .triangle(L,40px,pink)
}

6.arguments变量

5.less运算

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。

@base: 2cm * 3mm; // 结果是 6cm

你还可以对颜色进行算术运算：

@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355

6.less继承

less继承，如果继承者想使用被继承者所有状态下的属性，则需要在继承中加入all关键字(性能比混合高，但是灵活性变差)

前端进阶-css预编译器Less(一)