一. 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;
}