Less 官方文檔學習筆記

LESS 是css的一種擴展，它的編輯器是基於node.js 的less.js，將less文件編譯成css文件（可壓縮）。

其中的概念：

變數：定義變數來代替某個值，只能編譯一次，本質是“常量”。例如：

@color:#ffddee;

body {
  background-color:@color;      
}

輸出的結果為:

body {
  background-color:#ffddee;
}

變數是延時載入的，只有用到的時候才會載入。變數的查找順序是從下到上，最近優先。

混合(Mixin)： 在一個選擇其中調用另外一個選擇器，從而擁有其定義的特征。例如：

a {
  background-color:red;
  .nav;  
}

.nav{
  font-size:14px;
}

輸出的結果是：

1 a {
2   background-color:red;
3   font-size:14px;
4 }
5 
6 .nav {
7   font-size:14px;
8 }

在混合的時候，如果不想讓某個定義顯示，可以在定義後加（）,如上面的代碼，在.nav 的定義處改為.nav() {....} 則只輸出 a的定義。就像函數的調用一樣。而在調用的時候.nav()等價於.nav 如果.nav中需要使用變數，則可以在調用的時候傳入變數，如：

@font:14px;
a {
    background-color:red;
   .nav(@font);
}

.nav(@font) {
  font-size:@font;  
}

其中，@font 是可以設置預設值的，用法和在PHP中的用法一樣，直接在選擇器定義的時候設置@font=12px;即可。 

當傳遞多個參數的時候，可以用@argument對象接收所有的參數，然後以數組的方式使用它。如果.nav定義為 .nav(...) 則代表可以接收0到多個參數，如果定義為.nav(@font,...)則@font是必須的，後面還可以傳參數，後面的參數可以用@rest全部接收，然後以數組的方式使用即可。

混合門衛(Mixin Guards):使用 guards 來匹配不同的css

例如：

.mixin(@a) when (lightness(@a) >= 60%)
 {
    .......output a
}

.mixin(@a) when (lightness(@a) < 50%) {
  .........output b;
}

.mixin(@a) default() {
 .........output default
}

當調用mixin()時，根據傳入不同的參數，匹配條件調用不同的輸出定義。其中default() 是所有其他條件不匹配後的操作，這類似於其他語言中的switch case。

另外還可以用函數來檢查類型，例如： iscolor, isnumber, iskeyword, isurl, ispixel, ispercentage, isem, isunit 等等。

嵌套：在選擇器中定義另一個選擇器，這樣對應DOM中的結構. 例如：

div {
  a {
    font-size:14px; 
  }
}

編譯後輸出的結果為：

div a {
  font-size:14px;
}

繼承：在Less中允許選擇器繼承另一個選擇器定義的屬性，使用:extend，例如：

.subclass {
  background-color:#ccddee;
  text-align:center;
}

.class {
   color:red
   &:extend(.subclass);
}

其中&代表當前的上級對象，即.class本身，也就是說 .a:extend(.b){} 等價於 .a{&:extend(.b);}。上面的輸出結果為：

.class {
  color:red;
}

.subclass, .class {
  background-color:#ccddee;
  text-align:center
}

在繼承的時候，可以使用@_調用父層級的參數

如果在集成的時候加上all關鍵字，則會繼承所有有關的定義，比如.a:extend(.b all){}  那麼會繼承所有出現過.b定義的地方的定義

繼承的時候，如果在把 !important放在引用的選擇器後面，則所有繼承下的屬性都會帶有!important.

註意，:extend必須放在選擇器的最後，否則是編譯錯誤的。:extend是不能匹配帶有變數的選擇器定義的，然而帶有變數的選擇器定義可以使用:extend

合併屬性：在每個需要合併的屬性後添加一個+作為標識，則嵌套或者繼承時，相同的屬性就會合併

@import 

使用方法：@import (option) filename;  導入其他文件內容到該Less文件

其中，option的選項有以下值

referrence: 引用一個less文件，但是不對其內部的定義進行輸出；

inline: 包含(include) 源文件但是不執行

less： 將導入的文件作為less文件編譯，無論其尾碼名是什麼

css:  將導入的文件作為css文件編譯，無論其尾碼名是什麼

once(default): 只包含一次該文件

multiple: 包含多次該文件。