less 的几个规则

1.变量的延迟加载

@var: 0;
.class {
    @var: 1;
    .brass {
        @var: 2;
        three: @var;// 3less延迟加载，先读取完在加载
        @var: 3;
    }
    one: @var;// 1
}

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

　　变量使用@定义

.yanse(B, @w: 10px, @c: red) {/* 可以传递形参,还可以设置默认值 :后面为默认值 */
    color: pink;
　　 width: @w;
　　 height: 200px;
}

.yanse(A, @w: 10px, @c: red) {/* 可以传递形参,还可以设置默认值 :后面为默认值 */
    color: pink;
　　 width: @w;
　　 height: 100px;
}

.inner { 
　　.yanse(A, 100px, color: pink); // 第一个参数传递A的时候用的就是.yanse里面A的那一个
} 
.inner2 { 
　　.yanse(B, 200px);/*设置宽度，颜色使用默认值*/ 
}
.inner3 {
　　 .yanse(A, @c: black);/*高度默认值，设置第二个颜色为black*/
}

3.计算

div {
    width: (100 + 100px);/*最终width是200px 只要有一个写单位就可以了*/
}

4.继承　　继承被附在选择器后面或放置在规则集，它看起来就像一个在关键字extend后具有可选参数的伪类

.p{
    span{
        color:red
    }
}
.subClassOne{
    color: blue;
    &:extend(.p span);/*继承可以嵌套*/
}
/*最终编译为*/
.p span,.subClassOne {
    color: red;
}

/*被继承的选择器写在后面*/
.subClassOne{
    color: blue;
    &:extend(.p span);
}
.p{
    span{
        color:red
    }
}
/*最终编译为*/
.p span,.subClassOne {
    color: blue;
}

　　继承与混合区别

　　　　继承性能比混合高

　　　　灵活度比混合低

5.避免编译

/*~""波浪号双引号是不让less编译 因为浏览器自己可以编译cacl表达式*/

div {
    width: (100 + 100px);
    padding: cacl(100px + 100);
}
/*编译成*/
div {
    width: (100 + 100px);
    padding: 200px;
}
/*不让less编译*/
div {
    width: (100 + 100px);
    padding: ~"cacl(100px + 100)";
}
/*编译成*/
div {
    width: (100 + 100px);
    padding: cacl(100px + 100);
}