less

less是一種動態樣式語言，屬於css前處理器的範疇，它擴充套件了 CSS 語言，
增加了變數、Mixin、函式等特性，使 CSS 更易維護和擴充套件
LESS 既可以在 客戶端 上執行 ，也可以藉助Node.js在服務端執行。
bootstrap中less教程：https://less.bootcss.com/

Less編譯工具

koala 官網:www.koala-app.com
Visual Studio Code外掛：Easy LESS

less中的註釋

以//開頭的註釋，不會被編譯到css檔案中
以/**/包裹的註釋會被編譯到css檔案中  

less中的變數

使用@來申明一個變數：@pink：pink;
1.作為普通屬性值只來使用：直接使用@pink
下面使用較少
2.作為選擇器和屬性名：#@{selector的值}的形式
3.作為URL：@{url}
4.變數的延遲載入

• 在編譯時會將宣告編譯完後再載入變數

less中的巢狀規則

1.基本巢狀規則可直接按層級關係巢狀
2.&的使用將程式碼提升為同級適用於偽類/偽元素

less中的混合

混合就是將一系列屬性從一個規則集引入到另一個規則集的方式
1.普通混合.juzhong{} (會編譯到原生css中)
2.不帶輸出的混合.juzhong(){} (不會編譯到原生css中去)
3.帶引數的混合.juzhong(@w,@c,@h){}
4.帶引數並且有預設值的混合.juzhong(@w:10px,@h:10px,@c:pink){}
5.帶多個引數的混合
6.命名引數使用.juzhong(@c:black);
7.匹配模式.triangle(@_,@wwww,@ccccc)

• @_用於接受匹配引數，向下找到相匹配的
  8.arguments變數

 .border(@1,@2,@3) {
  border: @arguments;//@arguments將所有引數接受
}

less運算

在less中可以進行加減乘除的運算

less避免編譯

~"避免編譯的css"

less繼承

效能比混合高
靈活度比混合低
繼承類不能使用mix形式，即不能代引數和括號
使用繼承：

• 先匯入繼承類：@import "./mixin/juzhong-extend.less";
• 然後使用&:extend(.juzhong)