1、嵌套规则

Less使用嵌套规则来代替或者结合css的级联样式

     
    
      
this is a nested head
    
      
            this is a nested article.    
      
     
    .section-nested{color:@light-blue;}.section-nested .h-nested{font-size:16px;}.section-nested .article-nested{background-color:@nice-blue;}

Less中嵌套写法如下，更加简洁，并且能模仿出HTML中的结构。

.section-nested{    color:@light-blue;    .h-nested{            font-size:16px;        }    .article-nested{            background-color:@nice-blue;        }}

可以使用这种方法将伪选择器绑定到混合类中，如下典型的clearfix

.clearfix {  display: block;  zoom: 1;  &:after {    content: " ";    display: block;    font-size: 0;    height: 0;    clear: both;    visibility: hidden;  }}

&代表当前选择器的父级。

2、嵌套指令和冒泡

指令media或者keyframe等可以使用选择器一样嵌套方式。指令放在上面，作用于同一规则集合中的其他元素的相关命令保持不变，这就是冒泡的含义。

条件指令例如@Media, @supports 和 @document同样可以有选择器复制在它们的内容体中。

.section-nested{    @media screen{        color:green;        @media(min-width:768px){            .h-nested{color:red;}        }    }    @media tv{        color:black;    }}/**outputs**/@media screen {  .section-nested {    color: green;  }}@media screen and (min-width: 768px) {  .section-nested .h-nested {    color: red;  }}@media tv {  .section-nested {    color: black;  }}

其余的非条件指令例如 font-face或keyframes，同样可以冒泡，内容体不发生改变。

.meng{    color:yellow;    @font-face{        src:made-up-url;    }    padding:2px;}/**outputs**/.meng {  color: yellow;  padding: 2px;}@font-face {  src: made-up-url;}

3、运算

数学运算+, -, *, / 可在任何数字，颜色或变量中应用。可能的话，数学运算会把单位考虑进去，在加、减或者比较之前转化成数字。结果中会使用运算表达式中最左边明确规定的单位类型。如果转换不能实现或者没有意义，单位会被忽略。不能转换的例子：px to cm or rad to %.

// numbers are converted into the same units@conversion-1: 5cm + 10mm; // result is 6cm@conversion-2: 5 - 3cm - 5mm; // result is 1.5cm，第一个5没有单位，结果使用的是最左边第一次出现的单位cm，5mm也被转换为0.5cm来参与运算// conversion is impossible@incompatible-units: 5 + 5px - 1mm; // result is 6.22047244px// example with variables@base: 5%;@filler: @base * 2; // result is 10%@other: @base + @filler; // result is 15%.conversion{    width:@conversion-1;    height:@conversion-2;    margin:@base @filler @other;    padding:@incompatible-units;}/**outputs*/.conversion {    width: 6cm;    height: 1.5cm;    margin: 5% 10% 15%;    padding: 6.22047244px;}

乘法和除法运算时不会转换数字。多数情况下做乘除法时没有意义的，一个长度乘以另一个长度，得到一个面积，css不支持制定的面积样式。

less会在数字上做运算，并把明确规定的单位赋值给结果。

@multiply: 1cm * 3mm; // result is 3cm.conversion{    width:@conversion-1;    height:@conversion-2;    margin:@base @filler @other;    padding:@incompatible-units;    border:@multiply solid black;}/**outputs**/.conversion {    width: 6cm;    height: 1.5cm;    margin: 5% 10% 15%;    padding: 6.22047244px;    border: 3cm solid black;}

颜色colors会被分割为红，绿，蓝，透明度四个维度。运算时在每一个维度单独进行计算。

例如，用户对两个颜色做加法运算，结果中的绿色维度等于输入颜色的绿色维度数据之和。用户用一个数字乘以颜色数据，每一个颜色维度的数据都得以与之相乘。

颜色的运算经常会产生不合法的数据。如果某个颜色数据的结果大于ff或者小于00,此数据将会四舍五入为ff或00.如果透明度的运算结果大于1.0或者小于0.0，它也会四舍五入为1.0或0.0.

@color1: #224488 / 2; //results in #112244@color2: #112244 + #111; // result is #223355@color3: #fff+#555;.conversion{    color:@color1;    background-color:@color2;    border-color:@color3;}/**outputs**/.conversion {    color: #112244;    background-color: #223355;    border-color: #ffffff;}

4、Escaping,转义，允许你使用任意字符作为变量或属性的值

5、Function,函数

Less提供了各种各样的函数，用来转换颜色，操纵字符和做数据运算。函数参考中有相关的文档。

@basecolor: #f04615;@width: 0.5;.conversion {  width: percentage(@width); // returns `50%`  color: saturate(@basecolor, 5%);  background-color: spin(lighten(@basecolor, 25%), 8);}/**outputs**/.conversion {    width: 50%;    color: #f6430f;    background-color: #f8b38d;}

6、Scope 变量范围，变量和混合类首先在本地查找，找不到时编译器会在它的父级范围内查找。

@var: red;header {  @var: white;  h1 {    color: @var; // white  }}/**outputs**/.header {    color: #6c94be;}header h1 {    color: white;}

变量和混合类不需要在它被使用之前定义，也可以在被引用之后定义，上面等价于

@var: red;header {  h1 {    color: @var; // white  }  @var: white;}

这是一种懒加载的处理方式：变量是懒加载的，不需要在被引用之前定义。

一个变量被定义多次时，从当前范围中向上查找，最后一个定义的将被使用。

@var: red;header {  @var: white;  h1 {    @var:blue;    color: @var;  }  @var:yellow;}/**outputs**/header h1 {    color: blue;}