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

混入（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;
}

注意當你使用mixin的時候，括號是可選的。

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

無輸出的mixin（not outputting the mixin）

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

.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一個結(jié)構(gòu)復(fù)雜的選擇器中的屬性，你可以累積多個id或者class的選擇器。

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

>和空格都是可選的

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

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

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

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

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

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

default函數(shù)是對于所有的嵌套命名空間和mixin都會假定有一個相同的值。下面的mixin將不會被編譯，因為其中一個監(jiān)控的條件判斷必定為假：

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

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

在mixin后面使用關(guān)鍵詞 "! important"，將會讓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會將傳入選擇器的變量進行參數(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è)置默認值：

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

我們就可以直接使用：

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

你也可以使用不帶參數(shù)的參數(shù)混入。如果你不想把該mixin編譯顯示在樣式表中，但是又想要將mixin里面的屬性添加到其他的樣式規(guī)則中時，這個將會非常有用。很容易注意到，其實這個就是我們上面講到的“無輸出的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ù)可以使用分號";"或者逗號","進行分隔，不過推薦使用分號";"。逗號","有兩種含義，它可以被解釋成mixin的參數(shù)分隔符或者是樣式表的分隔符。在mixin分隔符使用逗號","會導(dǎo)致無法使用逗號","作為css的參數(shù)分隔符。另一方面，如果編譯器只要在mixin調(diào)用或者聲明處發(fā)現(xiàn)到一個分號";"，就會認定參數(shù)是使用分號作為分隔符，所有的逗號都是屬于樣式表的，不會當成mixin的分隔符：

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

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

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

.name(1,2,3)

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

.name(1,2,3 ;)

• 逗號分隔默認值：

.name(@param1: red , blue)

定義多參數(shù)mixin的時候，參數(shù)的名字重復(fù)和用數(shù)字做參數(shù)是不符合要求的。less會使用所有可以使用的屬性，如果你使用帶有一個參數(shù)的mixin: .mixin(green);，那么所有符合條件的mixin將會被使用。
注：符合的條件為：該mixin所需參數(shù)為一個的就會被使用，注意不是參數(shù)為一個的mixin，而是所需參數(shù)為一個的mixin。因為參數(shù)可以設(shè)置默認值，帶有默認值的參數(shù)不是必需的，不帶默認值的參數(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ù)名稱進行參數(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具有特殊的意思，當mixin被調(diào)用的時候，它包含了所有傳入的參數(shù)，如果你不想單獨處理參數(shù)的話，這個將會很好用。

.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ù)。在一個變量名后面使用這個參數(shù)，將會給變量分配參數(shù)。

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

此外：

.mixin(@a; @rest...){
//@rest 代表@a參數(shù)后面的所有參數(shù)
//@arguement 代表所有參數(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;
}

如果我們這個編寫代碼：

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

編譯為：

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

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

• 第一個mixin不匹配是因為它的第一個參數(shù)值是匹配"dark"
• 第二個mixin匹配是因為它的參數(shù)匹配"light"
• 第三個mixin匹配是因為它的參數(shù)匹配任何值
  我們也可以匹配參數(shù)數(shù)量：

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

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

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

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

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

從mixins中返回變量或者mixin

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

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

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

然而，定義在mixin中的變量可以作為一個返回值，因此可以像使用函數(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)的變量是不受保護可以被覆蓋的。

.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聲明或者存儲任何東西的變量的組合。可以將一個ruleset包含進另一個ruleset或者其他的區(qū)域塊，然后這個ruleset的所有屬性都會被復(fù)制到此。你也可以將其當成mixin的參數(shù)，像變量一樣傳入。

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

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

使用detached ruleset的時候后面一定要帶上括號，如果就使用@detached-ruleset是不起作用的。
如果你想將媒體查詢的代碼或者瀏覽器不支持的類名在mixin中進行定義，這個特性會很好用。ruleset可以被傳入到mixin，然后 mixin會包裝傳入的內(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;
}