Less 語法特性

　　　　　　　　　　　　　　　　                                 　——（原創翻譯：譯者添加部分解釋和代碼運行結果）

                                                ♥在線Less編譯器：LESS2CSS

---

 

《一》綜述

     Less做爲CSS的擴展，不只能向下兼容CSS，它還使用CSS已有的語法以增長自身的特有屬性。這使得學習Less變得簡單。

1. 變量：很顯而易見的表示方法:
   
   輸出：
   
   注意變量實際上是一個常數，且只能被定義一次。
   
   

   ---

2. 混合
   混合是從一個包括一系列的屬性的樣式集到另外一個樣式集的一種表達方式，以下所示：
   
   咱們想在其餘的樣式集中包含這些屬性被，所以，咱們只須要從所需的樣式集中提取出樣式名稱便可。輸出：
   
   #bordered元素的屬性將會出如今#menu a 中（其中一樣可使用.class屬性替換）

   ---

3. 嵌套規則
   Less中容許使用嵌套或者級聯組合。看以下示例：
   
   輸出：
   
   
   可使用以下的方式達到一樣的效果。
   
   輸出：（跟上面示例結果同樣）
   使用一樣的方式還能夠綁定僞類，
   
   （其中&表示當前選擇器的父元素）
   輸出：
   
   
   

   ---

4. 嵌套指令與冒泡
   media 與 keyframe 等指令能夠像選擇器同樣進行嵌套。
   
   條件指令：e.g @Media, @supports 與 @document 也會被選擇性複製到對應元素中去。
   
   輸出：
   
   剩餘的非條件指令，好比：font-face 與 keyframes，也會進行冒泡，對應元素不會改變。
   例如：
   
   輸出：
   
   

   ---

5. 操做符
   算法操做符 + - * / 可以操做任何數字，顏色或變量，結果的單位類型爲最左邊的單位。在加減、比較運算以前會先進行格式轉化，若是出現語法錯誤或表意不明，則將被忽略，好比：px -> cm 或 red->%;
   
   相乘與相除不會轉換數字，
   
   

   ---

6. 
   
   
   
   
   
   

   ---

 

 

 

 

 

 

 

 

                                【資源共享，歡迎轉載，轉載請註明出處:Qbooooble】

原文連接-Less官方文檔