less學習 less的混合（mixin）

上篇：less的巢狀規則

本篇我們來講述一下什麼是混合（mixin）

混合簡單的理解就是把乙個css規則嵌入到另乙個css規則中，那麼這該怎麼理解學習呢？我們先來看一下乙個簡單的混合

.a, #b 
.mixin-class 
.mixin-id 
//編譯後
.a, #b  
.mixin-class 
.mixin-id

從上面的例子我們可以發現什麼？

.a和#b分別定義了乙個css樣式，然後將定義的樣式套用到另乙個類中，這就是混合了

我們可以將一些公共的樣式先封裝起來，然後在編寫less的時候，遇到需要的直接混合進行，就萬事大吉，省時省力了，哈哈

我們接下來看一下他的使用語法

實際上我們定義的任何乙個css樣式，就可以直接拿來混合使用了，那麼怎麼使用呢，上邊的例子中就是類似函式一樣，直接在乙個css規則中，以.a()或者#b()寫入進去就可以用了，基礎語法就這麼簡單，當然實際上你的括號也可以不寫的，也就是直接用.a或者#b也是可以通過的。

在進一步理解前，我們先來看乙個在css定義的時候在選擇器後邊加上括號的情況。

如果我們在編譯less的時候，我們不希望將呼叫的混合也一起編譯出來，那我們可以在定義的時候，加上乙個括號，這樣我們在編譯後就不會一起編譯出來（節省了空間）

這個很簡單，直接上例子看著理解下就好了。

.my-mixin 
.my-other-mixin() 
.class 
//編譯後
.my-mixin  
.class

混合有幾個要點

首先是混合是可以包含選擇器的。

我們在編寫less的時候，出於方便肯定會使用巢狀規則，那麼在如果把帶有巢狀的類作為混合呢。他會把子級也一起編譯出來嗎？答案是會的。

放個例子大家細品一下，就很容易理解了

.my-hover-mixin() 
}button 
//編譯後
button:hover

第二個要點便是命名空間

當然對於多層巢狀來說，我們可以在混合的時候，為了保證不會在編寫的時候不會出現重複命名（在多人協作開發的時候就很有用了），因此less可以使用命名空間，對css規則進行分組，保證了混合的時候不會出現重名現象

#outer 
}.c

從上邊例子中，我們了解到，#outer這個便是命名空間（所以命名空間就是#+名稱），而我們在進行混合的時候，我們就使用了#outer > .inner，就可以指定使用#outer下的.inner的css樣式。

備註：在使用的時候，空格和》都是可選的，就是可有可無的。

所以以下的寫法都是類似的

#outer > .inner;
#outer > .inner();
#outer .inner;
#outer .inner();
#outer.inner;
#outer.inner();

關於混合後面還有混合引數混合功能等，下期更新！！！