花了這兩天上班的空閑時(shí)間把mixins的大部分的相關(guān)內(nèi)容寫完了，但是還有兩小塊內(nèi)容還沒寫，預(yù)計(jì)放在下一篇當(dāng)中，下一篇可能在明天或者后天出。
看了下還是覺得把剩下的內(nèi)容放進(jìn)這里會(huì)好一點(diǎn)，不然下一篇的主題就有點(diǎn)亂，注意看更新的內(nèi)容（會(huì)標(biāo)注出來）。

混入（mixins）

從已有的樣式中"mix-in"屬性

你可以混入class選擇器和id選擇器：

.a, #b{
    color: red;
}
.mixin-class{
    .a();
}
.mixin-id{
    #b(); 
}
編譯為：
.a, #b{
    color: red;
}
.mixin-class{
    color: red;
}
.mixin-id{
    color: red;
}

注意當(dāng)你使用mixin的時(shí)候，括號(hào)是可選的。

.a();
.a;
//上面兩個(gè)語句編譯后是相同的

無輸出的mixin（not outputting the mixin）

如果你想創(chuàng)建一個(gè)mixin但是不想這個(gè)mixin輸出到樣式表中，那么你可以在mixin后面加上括號(hào)（）。

.my-mixin{
    color: black;
}
.my-other-mixin(){
    background: white;
}
.class{
    .my-mixin;
    .my-other-mixin;
}
編譯為：
.my-mixin{
    color: black;
}
.class{
    color: black;
    background: white;
}

選擇器 in mixins

mixins 不僅能包含樣式屬性，還能包含選擇器。

.my-hover-mixin(){
    &:hover{ //偽類選擇器
        border: 1px solid red;
    }
}
button{
    .my-hover-mixin();
}
編譯為：
button:hover{
    border: 1px solid red;
}

命名空間

如果你想要mixin一個(gè)結(jié)構(gòu)復(fù)雜的選擇器中的屬性，你可以累積多個(gè)id或者class的選擇器。

#outer{
    .inner{
        color: red;
    }
}
.c{
    #outer > .inner;
}

>和空格都是可選的

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

你可以將你的mixins放在id選擇器的下級(jí)，這樣可以保證不會(huì)和其他庫沖突。

#my-library{
    .my-mixin(){
        color: black;
    }
}
.class{
    #my-library > .my-mixin();
}

命名空間監(jiān)控（guarded namespaces）

如果命名空間設(shè)置了監(jiān)控，只有監(jiān)控的條件判斷為真，mixins才會(huì)被定義聲明。命名空間的監(jiān)控和mixin的監(jiān)控是相同的，所以下面兩個(gè)mixins編譯結(jié)果一樣。

#namespaces when (@mode=huge){
    .mixin(){ ... }
}
#namespace{
    .mixin() when (@mode=huge){ ... }
}

default函數(shù)是對(duì)于所有的嵌套命名空間和mixin都會(huì)假定有一個(gè)相同的值。下面的mixin將不會(huì)被編譯，因?yàn)槠渲幸粋€(gè)監(jiān)控的條件判斷必定為假：

#sp_1 when(default()){
    #sp_2 when(default()){
        .mixin() when not(default()){ ... }
    }
}

關(guān)鍵詞 "! important"

在mixin后面使用關(guān)鍵詞 "! important"，將會(huì)讓mixin里面的所有屬性都繼承 "! important"：

.foo(@bg: #f5f5f5, @color: #999){
    background: @bg;
    color: @color;
}
.unimportant{
    .foo();
}
.important{
    .foo() !important;
}

編譯為：
.unimportant{
    background: #f5f5f5;
    color: #999;
}
.important{
    background: #f5f5f5 !important;
    color: #999 !important;
}

參數(shù)混入（parametric mixins）

mixins可以帶參數(shù)。mixins會(huì)將傳入選擇器的變量進(jìn)行參數(shù)混入。

.border-radius(@radius){
    -webkit-border-radius: @radius;
        -moz-border-radius: @radius;
                 border-radius: @radius;
}

下面我們就可以將其混入規(guī)則中：

#header{
    .border-radius(4px);
}
.button{
    .border-radius(6px);
}

參數(shù)混入所帶的參數(shù)可以設(shè)置默認(rèn)值：

.border-radius(@radius: 5px){
    -webkit-border-radius: @radius;
        -moz-border-radius: @radius;
                 border-radius: @radius;
}

我們就可以直接使用：

#header{
    .border-radius;//將會(huì)設(shè)置5px的圓角
}

你也可以使用不帶參數(shù)的參數(shù)混入。如果你不想把該mixin編譯顯示在樣式表中，但是又想要將mixin里面的屬性添加到其他的樣式規(guī)則中時(shí)，這個(gè)將會(huì)非常有用。很容易注意到，其實(shí)這個(gè)就是我們上面講到的“無輸出的mixin（not outputting the mixin）”。

.wrap(){
    text-wrap: wrap;
    word-wrap: break-word;
}
pre{ .wrap }

編譯為：
pre{
    text-wrap: wrap;
    word-wrap: break-word;
}

多參數(shù)的mixins

參數(shù)可以使用分號(hào)";"或者逗號(hào)","進(jìn)行分隔，不過推薦使用分號(hào)";"。逗號(hào)","有兩種含義，它可以被解釋成mixin的參數(shù)分隔符或者是樣式表的分隔符。在mixin分隔符使用逗號(hào)","會(huì)導(dǎo)致無法使用逗號(hào)","作為css的參數(shù)分隔符。另一方面，如果編譯器只要在mixin調(diào)用或者聲明處發(fā)現(xiàn)到一個(gè)分號(hào)";"，就會(huì)認(rèn)定參數(shù)是使用分號(hào)作為分隔符，所有的逗號(hào)都是屬于樣式表的，不會(huì)當(dāng)成mixin的分隔符：

• 具有兩個(gè)參數(shù)，并且參數(shù)中含有逗號(hào)的情況：

.name(1,2,3 ; some,else)

• 具有三個(gè)參數(shù)，每個(gè)參數(shù)包含一個(gè)數(shù)字：

.name(1,2,3)

• 使用假的分號(hào)去創(chuàng)建mixin，該mixin具有一個(gè)用逗號(hào)去分隔樣式的參數(shù)：

.name(1,2,3 ;)

• 逗號(hào)分隔默認(rèn)值：

.name(@param1: red , blue)

定義多參數(shù)mixin的時(shí)候，參數(shù)的名字重復(fù)和用數(shù)字做參數(shù)是不符合要求的。less會(huì)使用所有可以使用的屬性，如果你使用帶有一個(gè)參數(shù)的mixin: .mixin(green);，那么所有符合條件的mixin將會(huì)被使用。
注：符合的條件為：該mixin所需參數(shù)為一個(gè)的就會(huì)被使用，注意不是參數(shù)為一個(gè)的mixin，而是所需參數(shù)為一個(gè)的mixin。因?yàn)閰?shù)可以設(shè)置默認(rèn)值，帶有默認(rèn)值的參數(shù)不是必需的，不帶默認(rèn)值的參數(shù)是必需的。

.mixin(@color){
    color-1: @color;
}
.mixin(@color; @padding: 2){
    color-2: @color;
    padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2){
    color-3: @color;
    padding-3: @padding;
    margin: @margin @margin @margin @margin;
}
.test{
    .mixin(#999);
}

編譯為：

.test{
    color-1: #999;
    color-2: #999;
    padding-2: 2;
}

參數(shù)命名

使用mixin的時(shí)候會(huì)通過參數(shù)名稱進(jìn)行參數(shù)匹配而不是參數(shù)定義的位置。

.mixin(@color: black; @margin: 10px; @padding: 20px){
    color: @color;
    margin: @margin;
    padding: @padding;
}
.class1{
    .mixin(@margin: 20px; @color: #336699);
}
.class2{
    .mixin(#336699; @padding: 40px);
}

編譯為：

.class1{
    color: #336699;
    margin: 20px;
    padding: 20px;
}
.class2{
    color: #336699;
    margin: 10px;
    padding: 40px;
}

變量 @arguments

在mixin中，@arguments具有特殊的意思，當(dāng)mixin被調(diào)用的時(shí)候，它包含了所有傳入的參數(shù)，如果你不想單獨(dú)處理參數(shù)的話，這個(gè)將會(huì)很好用。

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000){
    -webkit-box-shadow: @arguements;
       -moz-box-shadow: @arguements;
            box-shadow: @arguements;
}
.test{
    .box-shadow(2px; 5px);
}

編譯為：

.test{
    -webkit-box-shadow: 2px 5px 1px #000;
       -moz-box-shadow: 2px 5px 1px #000;
            box-shadow: 2px 5px 1px #000;
}

可變參數(shù)和變量 @rest

如果你想使用數(shù)量可變的參數(shù)的mixin的時(shí)候，你可以使用"..."這個(gè)參數(shù)。在一個(gè)變量名后面使用這個(gè)參數(shù)，將會(huì)給變量分配參數(shù)。

.mixin(...){}//匹配0-N個(gè)參數(shù)
.mixin(){}//只匹配0個(gè)參數(shù)
.mixin(@a: 1){}//匹配0-1個(gè)參數(shù)
.mixin(@a: 1; ...){}//匹配0-N個(gè)參數(shù)
.mixin(@a;...){}//匹配1-N個(gè)參數(shù)

此外：

.mixin(@a; @rest...){
//@rest 代表@a參數(shù)后面的所有參數(shù)
//@arguement 代表所有參數(shù)
}

模式匹配

有時(shí)候，你可能想要通過傳入的參數(shù)來改變mixin的行為。
下面先讓我們從基礎(chǔ)情況開始：

.mixin(@s; @color){ ... }
.class{
    .mixin(@switch; #888);
}

現(xiàn)在我們想要.mixin基于@switch的值表現(xiàn)的不一樣，那么我們可以這樣定義.mixin：

.mixin(dark; @color){
    color: darken(@color, 10%);
}
.mixin(light; @color){
    color: lighten(@color, 10%);
}
.mixin(@_; @color){
    display: block;
}

如果我們這個(gè)編寫代碼：

@switch: light;
.class{
    .mixin(@switch; #888)
}

編譯為：

.class{
    color: #a2a2a2;
    display: block;
}

傳入.mixin的顏色是亮色。如果@switch的值是dark,結(jié)果將會(huì)是暗色。
上面運(yùn)行的過程可以這么分析：

• 第一個(gè)mixin不匹配是因?yàn)樗牡谝粋€(gè)參數(shù)值是匹配"dark"
• 第二個(gè)mixin匹配是因?yàn)樗膮?shù)匹配"light"
• 第三個(gè)mixin匹配是因?yàn)樗膮?shù)匹配任何值
  我們也可以匹配參數(shù)數(shù)量：

.mixin(@a){
    color: @a;
}
.mixin(@a; @b){
    color: fade(@a; @b);
}

現(xiàn)在如果我們調(diào)用.mixin并且傳入一個(gè)參數(shù)，我們將會(huì)得到第一個(gè)mixin的編譯結(jié)果，但是如果我們調(diào)用然后傳入兩個(gè)參數(shù)，我們將會(huì)得到第二個(gè)mixin的編譯結(jié)果。

mixins的相關(guān)內(nèi)容還有一點(diǎn)，將會(huì)放在下一篇當(dāng)中，喜歡的點(diǎn)個(gè)喜歡或者點(diǎn)個(gè)贊哦！

以下為原本打算放在下一篇的內(nèi)容，出于文章完整性的考慮還是放在這下面好一點(diǎn)。

函數(shù)化Mixins（Mixins as Function）

從mixins中返回變量或者mixin

在一個(gè)mixin中定義的變量和mixins在其使用范圍內(nèi)是可見并且可用的。只有一個(gè)例外，如果調(diào)用者（caller）包含了一個(gè)變量，而這個(gè)變量（可能是定義在另外的mixin的調(diào)用處）與被調(diào)用的mixin中的變量重名的話，變量不會(huì)被覆蓋。在調(diào)用者（caller）本身的變量是受保護(hù)的，繼承自父作用范圍（caller parent）的變量是會(huì)被覆蓋的。

.mixin(){
    @width: 100%;
    @height: 200px;
}
.caller{
    .mixin();
    width: @width;
    height: @height;
}

編譯為：
.caller{
    width: 100%;
    height: 200px;
}

然而，定義在mixin中的變量可以作為一個(gè)返回值，因此可以像使用函數(shù)那樣創(chuàng)建mixin。

.average(@x, @y){
    @average: ((@x + @y) / 2);
}
div{
    .average(16px, 50px);
    padding: @average;
}

編譯為：
div{
    padding: 33px;
}

定義在調(diào)用者（caller）自身下的變量是不能被覆蓋的，因此，定義在調(diào)用者的父代（caller parent）的范圍內(nèi)的變量是不受保護(hù)可以被覆蓋的。

.mixin(){
    @size: in-mixin;
    @defineOnlyInMixin: in-mixin;
}
.class{
    margin: @size @defineOnlyInMixin;
    .mixin();
}
@size: global-define-value;

編譯為：
.class{
    margin: in-mixin in-mixin;
}

最后，定義在mixin中的mixin也可以作為返回值。

.unlock(@value){
    .dosomething(){
        declaration: @value;
    }
}
#namespace{
    .unlock(5);
    .dosomething();
}

編譯為：
#namespace{
    declaration: 5;
}

Passing Rulesets to Mixins

發(fā)布于v1.7.0
ruleset可以理解成css屬性，嵌套的ruleset，media聲明或者存儲(chǔ)任何東西的變量的組合。可以將一個(gè)ruleset包含進(jìn)另一個(gè)ruleset或者其他的區(qū)域塊，然后這個(gè)ruleset的所有屬性都會(huì)被復(fù)制到此。你也可以將其當(dāng)成mixin的參數(shù)，像變量一樣傳入。

@detached-ruleset: { background: red };
.top{
    @detached-ruleset();
}

編譯為：
.top{
    background: red;
}

使用detached ruleset的時(shí)候后面一定要帶上括號(hào)，如果就使用@detached-ruleset是不起作用的。
如果你想將媒體查詢的代碼或者瀏覽器不支持的類名在mixin中進(jìn)行定義，這個(gè)特性會(huì)很好用。ruleset可以被傳入到mixin，然后 mixin會(huì)包裝傳入的內(nèi)容。

.desktop-and-old-ie(@rules){
    @meida screen and (min-width: 1200){ @rules(); }
    html.lt-ie9 &                      { @rules(); }
}
header{
    background-color: blue;
    .desktop-and-ie({
        background-color: red;
    })
}

編譯為：
header {
    background-color: blue;
}
@media screen and (min-width: 1200) {
    header {
        background-color: red;
    }
}
html.lt-ie9 header {
    background-color: red;
}