less學習整理的知識點

1. less是一種動態樣式語言，屬於css預處理器的範疇，它擴展了 CSS 語言， 增長了變量、Mixin、函數等特性，使 CSS 更易維護和擴展 LESS 既能夠在客戶端上運行 ，也能夠藉助Node.js在服務端運行。

2. less中的註釋

   • 以//開頭的註釋，不會被編譯到css文件中
   • 以/**/包裹的註釋會被編譯到css文件中

3. less中的變量

   • 使用@來申明一個變量：@pink：pink;

     1. 做爲普通屬性值只來使用：直接使用@pink

     2. 做爲選擇器和屬性名：#@{selector的值}的形式

     3. 做爲URL：@{url}

     4. 變量的延遲加載（less中的變量是所有加載完才能夠起做用）

4. less中的嵌套規則

   1.基本嵌套規則

   2.&的使用（平級之間用&鏈接，靠在一塊兒，中間沒有空格）

5. less中的混合

   • 混合的定義在less規則有明確的指定，使用.的形式來定義。

   • 混合就是將一系列屬性從一個規則集引入到另外一個規則集的方式

     1. 普通混合 會編譯到原生css中去，會使css文件變的很大

     2. 不帶輸出的混合 （加雙括號）

     3. 帶參數的混合 引用混合時須要添值，不然會報錯

     4. 帶參數而且有默認值的混合，引用混合時，若是沒有添加值，則會使用默認值

     5. 帶多個參數的混合

     6. 命名參數 當形參和實參不同時，能夠將實參傳形參指定參數名的值

     7. 匹配模式 調用混合時會帶上同名且第一個參數爲@_的

     8. arguments變量 實參僞數組，通常用於簡寫屬性。簡化代碼

6. less運算

   • 在less中能夠進行加減乘除的運算（在less中計算的雙方，後面帶單位就能夠了）
   • 原生css中用cacl進行計算

7. less繼承（注意選擇器優先級問題） #test{ &:extend(.father) } #test:extend(.father){ }

   • 繼承實質上將.father選擇器和#test組合成一個選擇器，聲明塊使用.father的
   • all:繼承全部和.father相關的聲明塊
   • 切記父類不能定義成混合（繼承不靈活性能高 混合靈活性能低）

8. less避免編譯

   • ~"不會被編譯的內容"
   • 變量在less中屬於塊級做用域，延遲加載