變數（variables）

Less中採用“ @ ”定義變數，使用時直接使用“@命名符”。

1. 作為普通變數

// 命名：
@color:red; 
// 呼叫：
div{
      color:@color;
}

普通用法即為變數作為屬性值時。

2. 作為選擇器和屬性名的變數

@kuandu:width; 
.{@kuandu}{ @kuandu:150px;}

作為選擇器需要用花括號{}來包含。作為屬性名時，和屬性值的呼叫方法一樣。

3. 作為URL

@myURL:" http://www.baidu.com/static/images";
bg:url("@myURL/logo.png");

這樣在相同路徑下的圖片或檔案就可以宣告一個URL變數，後接具體圖片/檔名，路徑不要忘記加雙引號哦~。

4. 延遲載入
   變數不論是在呼叫的前面定義還是在後面定義都是一樣的，具有延遲載入的特性。
   它會在當前作用域樣式未載入之前先載入變數，而且是由內而外，先尋找作用域內的變數，如果沒有在尋找作用域外的變數。
   我們可以簡單理解為變數的提升，即解析器解析到此項為變數時，會將其全部提升到前面，以供呼叫。
   注意：不是提最前面哦~，而是按提升順序依次排列。即解析到的第一個變數在第一個，第二個在第二個，只是提升到呼叫的前面去~。

@font-size:12px;     // 第一個變數
@color:pink;	     // 第二個變數
div{
	font-size:@font-size;
}
// 下面的解析器解析後和上面的一樣，即下面的變數會解析到當前作用域的前面。
div{
	font-size:@font-size;
}
@font-size:12px;   // 第一個變數
@color:red;        // 第二個變數
 

5. 定義多個相同名稱的變數時
   在定義一個變數兩次時，只會使用最後定義的變數，Less會從當前作用域向上搜尋，這個行為類似於CSS定義中始終使用最後定義的屬性值（CSS層疊性）。

@font-size:12px;		    // 第一次定義
div{
	@font-size:15px;	    // 第二次定義（在div內部）
	font-size:@font-size;       // 最終結果為20px
	@font-size:20px;	    // 第三次定義（在div內部）
	// 解析：
	// 由我們的簡單理解可知，第三次的會提升到第二次的後面，呼叫的前面，所以第三次會把第二次的層疊掉，在當前作用域中，離呼叫最近的是第三次，所以會找到第三次定義的20px
}
html{
	font-size:@font-size;	// 最終結果為12px
	// 解析：
	// 在div內部定義的只會在div內部起作用，所以html會找到離它最近的第一次定義的12px
}
 

混合（mixins）

1. 普通混合
混合就是一種將一系列屬性從一個規則集引入（混合）到另一個規則集的方式。規則集可以理解為CSS樣式，當我們的樣式重複出現時，我們可以採用混合的方式來減少程式碼冗餘。接下來先讓我們看看普通的混合吧！

.bgc{
    background-color: pink;
}
body{
    .bgc;
}
// 輸出的CSS樣式為：
.bgc{
    background-color: pink;
}
body{
    background-color: pink;
}

如果我們不想讓這個.bgc輸出到css檔案中，該怎麼辦呢，接下來為你介紹~

2. 不帶輸出的混合
如果你想要建立一個混合集，但是卻不想讓它輸出到你的樣式中
在不像輸出的混合集的名字後面加上一個括號就可以實現。
我們在單純定義只是用於呼叫時，可以使用，我們就可以把上述程式碼優化。

.bgc(){
    background-color: @color;
}
body{
    .bgc();
}
// 輸出CSS樣式為
body{
    background-color: pink;
}

3. 帶選擇器的混合
混合選擇器內的規則

.my_hover(){
    // 偽類前使用 & 詳情見 Less的巢狀規則 
    &:hover{
        color: @color;
    }
}
button{
    .my_hover(); 
}
/* 只是將裡面的CSS程式碼拿過來，相當於：
button{
    &:hover{
        color: @color;
    }
}
*/
// 輸出為：
button:hover {
  color: pink;
}

4. 帶引數的混合
當屬性一致但是屬性值不一致時，我們可以通過傳參的方式改變屬性值，就可以給許許多多的選擇器重複呼叫啦~

.border(@border_color){
    border: 1px solid @border_color;
}
div{
    .border(pink);  // div想要粉色滴
}
p{
    .border(red);   // p也想要紅色滴
}

5. 帶引數且有預設值
在許多都是用一個屬性值時，我們可以設定預設值，這樣就可以不用傳參啦~

.border(@border_color:pink){
	border:1px solid @border_color;
}
div{
    .border();     
}

6. 帶多個引數的混合
首先我們看看什麼是多引數吧！
（1）多引數：一個組合可以帶多個引數，引數之間可以用分號或者逗號分割

• 推薦採用分號分割，因為逗號有兩個意思，它可以解釋為mixins引數分隔符或者css列表分隔符

• 如果傳參的括號裡面都是以逗號分割，那麼會依次傳給各個引數值

• 如果既有括號又有分號，會將分號前面的看作一個整體作為引數

（2）定義多個具有相同名稱和引數數量的mixins是合法的，Less會使用它可以應用的屬性，如果使用mixin的時候只帶一個引數，這個屬性會導致所有的mixin都會強制使用這個明確的引數。

div{
    .div(#ccc);  // 所有的 .div裡的第一個引數都賦值為 #ccc 
}
// 第一個混合
.div(@border_color){
    border:1px solid @border_color;
}
// 第二個混合
.div(@border_color;@margin:2){
    .border(@border_color);
    margin: @margin;
}
// 第三個混合
.div(@border_color;@margin;@padding:2){
    .border(@border_color);
    margin: @margin;
    padding: @padding;
}
// 由於我們只傳遞了一個引數，而第三個混合的margin值沒有預設值，也沒有得到賦值，所以無法被呼叫。
// 輸出為
div {
  border: 1px solid #ccc;      // 來自第一個 和第二個混合（合併輸出）
  margin: 2;                   // 來自第二個混合
}

7. 命名引數
首先我們來了解什麼是命名引數：
引用mixin時可以通過引數名稱而不是引數的位置來為mixin提供引數值，任何引數都可以通過它的名稱來引用，這樣就不必按照任意特定的順序來使用引數
這樣就不會擔心資料被亂傳嘍~

.div(@border_color;@margin:2){
    .border(1px solid @border_color);
    margin: @margin;
}
div{
    .div(@margin:3;#ccc);   // 這樣來指定第一個引數賦值給@margin變數，就不用按照原先定義的指定順序輸入啦~
}

8. @arguments變數
@arguments代表所有的可變引數，引數的先後順序就是你( )裡的引數順序，值的位置和個數也是一一對應的，在你想給第一個和第三個賦值時不能直接寫(值1，，值3)，必須把原來的預設值寫上去。

.p_border(@c;@x:solid;@size:1px;){
    border: @arguments;
}
// 只給第一個沒有預設值的引數，後面會使用預設值
p{
      .p_border(red);
}
// 輸出的css檔案為：
p{
      border:red solid 1px;
}
// 但如果我們將引數位置改變
.p_border(@x:solid;@size:1px;@c){
    border: @arguments;
}
// 這時像剛剛那樣呼叫就會報錯 因為是一一對應的 此時的red賦值給了@x，而@c沒有值
// 所以必須這樣 將預設值寫上
p{
     .p_border(solid,1px,red);
}
// 如果全部都有預設值 則可以直接呼叫 如：
.p_border(@c:red;@x:solid;@size:1px;){
    border: @arguments;
}
p{
    .p_border();
}

9. 匹配模式
傳值的時候定義一個字元，在使用的時候使用哪個字元，就呼叫哪條規則
根據不同功能定義字元，類似一個識別符號，適用於相同屬性值在類似屬性中的應用，例如下例都是設定邊框圓角。

.border(all;@w:5px){
    border-radius: @w;
}
.border(t_l;@w:5px){
    border-top-left-radius: @w;
}
// 想要四個圓角就呼叫 all
header{
    .border(all;50%);
}
// 想要左上一個圓角就呼叫 t_l
header{
    .border(t_l;50%);
}
// 類似的我們還可以定義右上、左下、右下等，這樣就可以在適時呼叫合適的方法了

10. 得到混合變數中變數的返回值

 .average(@x;@y){
  	@average: ((@x + @y) / 2);
  }
  div{
  	.average(10;20);    // 呼叫進行計算
  	padding:@average;   // 得到混合變數中變數的返回值
  }
// 之所以可以得到 @average 是因為，混合是將規則集（這裡為CSS樣式表）拿過來 也就會變成如下程式碼
div{
      // 呼叫時 進行變數賦值
      @x:10;
      @y:20;
      // 將規則集混合
      @average: ((@x + @y) / 2);
      // 這樣就是一個作用域啦~ 當然可以使用啦~
      padding:@average;
}

以上均為自己理解，若有不當，還請指出~ ^_^