Less 簡介

概念

Less 是 css 預編譯器，能夠擴展 css 語言，添加功能，好比變量、混合、函數和許多其餘的技術，讓 css 更具維護性、主體性和擴展性。

Less官方網址：http://www.lesscss.org

註釋：

• // ，不會被便有到 css 文件中
• /**/ ，會編譯到 css 文件中

變量

• 普通變量
• 做爲選擇器和屬性名的變量（屬性名必須是可用的才能夠）
• 做爲URL的變量
• 延遲加載

混合

• 普通混合
• 不帶輸出的混合，類名後使用（）；font_hn 不會在 css 文件中輸出
• 帶選擇器的混合（& 選擇的是全部的父級元素）
• 帶參數的混合
• 帶參數且帶有默認值的混合
• 定義多個具備相同名稱和參數數量的混合
• 命名參數
• arguments
• 匹配模式
• 混合的返回值

嵌套規則

• 概念定義
• & 說明：表示當前選擇器的全部父元素
• 組合生成全部可能的選擇器列表

嵌套指令和冒泡

指令也能夠像選擇器同樣被嵌套，如 media , keyframe。

冒泡就是被嵌套的指令會被提高放在最外層,而裏面其餘的選擇器順序保持不變。

指令能夠分爲兩種：

• 條件指令，條件指令會把選擇器複製到它們的body(體內)而且冒泡。
• 非條件指令，非條件指令只會冒泡，它們的body(體內)不會改變。

操做符

算術運算 +，-，*，/能夠在任意數量，顏色或可變的操做。

• 在加減比較以前會轉換成數字，單位是最左顯示聲明的單元類型，若是轉換是不可能的或者沒有意義的，這個時候的單位會被忽略。
• 在乘除時不會轉換成數字。
• 在顏色計算過程當中，當顏色的值超過 #fff 時，顏色的值就不會增長了，會一直是 #fff；而當顏色的值超過 #000 時，顏色的值就不會減小了，會一直是 #000。

若是轉換是不可能的或沒有意義，則忽略單位；不可能的轉換示例：px轉換爲cm或rad轉換爲％。

轉義

轉義可使任意的字符串做爲屬性或者是變量值，在字符串裏面想要添加註釋時，必須使用多行註釋。

除插值外，裏面的任何東西~"anything"或~'anything'按原樣使用。

函數（functions）

Less提供了許多用於轉換顏色，處理字符串和進行算術運算的函數。

命名空間和訪問器

在less中，咱們須要將一些混合組合在一塊兒，能夠經過嵌套多層id或者class實現。

範圍（做用域）

Less中的做用域與編程語言中的做用域概念很是類似，首先會在局部查找變量和混合，若是沒找到，編譯器就會向上在父元素做用域中查找，以次類推。

輸入

導入幾乎能夠預期，咱們能夠導入.less文件，而且其中的全部變量都將可用，擴展名是爲.less文件指定的。

條件表達式

• ,>=,=,<=,<,true

• 類型檢查函數（能夠基於值的類型來匹配函數）
• 單位檢查函數

循環

在less中，混合能夠調用它自身，這樣當一個混合遞歸調用本身，再結合Guard表達式和模式匹配這兩個特性，就能夠寫出循環結構。

合併

"+"逗號分隔所合併的屬性值

在須要合併的屬性的：的前面加上+就能夠完成合並，合併以，分割屬性。

注意：當前使用的是哪個，那麼就以這個相加。