一. less注释

写法1： /* */在编译后会被保留，也就是在编译完成后的css中会看到你写的注释；

写法2： // 不会被编译，不被保留；

二. 变量

2.1 变量的定义和用法

@变量名 ：变量值;

举个栗子：

定义一个demo_width/height/color变量

@demo_width: 300px;
@demo_height: 500px;
@demo_color: #E0EAFA;
    

怎么引用上面的变量？

    .box {
        width: @demo_width;
        height: @demo_height;
        background-color: @color_style;
        font-size: 16px;
        margin: 0 auto;
    }

编译后的结果:

      .box {
        width: 300px;
        height: 500px;
        background-color: #E0EAFA;
        font-size: 16px;
        margin: 0 auto;
    }

2.2 注意less中变量嵌套情况下的就近原则

• less 中的变量，定义的值是一次性的，全局的情况下，它的值不会发生改变；

• 在嵌套的情况下，如果你定义一个变量之后，在给它赋新值的时候，后面引用这个变量的值已经发生改变了

• LESS 中的变量和其他编程语言一样，可以实现值的复用，同样它也有生命周期，也就是 Scope（变量范围，或者叫作用域），简单的讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局；

举个李子坝：

@width: 200px;
#parentBox {
    @width: 500px;
    #contentBox {
        width: @width;//它取得是最近定义的width的值500px;
    }
}
#navBox {
    width: @width;//它取得是最上面定义的width值200px;
}

编译结果：

#parentBox #contentBox {
    width: 500px;
}
#navBox {
    width: 200px;
}