less新手入門（二） Mixin 混合、帶參數的Mixin

三、mixin  混合

“mixin”屬性只能基於現在已有的樣式規則！你可以在mixin中使用類選擇器和id選擇器：

.a,#b{ color: rebeccapurple;
} .mixin-class{ .a(); } .mixin-id{ #b(); }

輸出：

.a, #b { color: rebeccapurple;
} .mixin-class { color: rebeccapurple;
} .mixin-id { color: rebeccapurple;
}

注意，當調用mixin時，括號是可選的

.a()  //此種寫法和下面寫法無區別
.a;

3.1 不輸出的 mixin

如果你想創建一個mixin，但你不想讓mixin在生成css中輸出，你可以在它后面加上括號 () 。

.my-mixin{ color: black;
} .my-other-mixin(){ background: wheat;
} .class{ .my-mixin; .my-other-mixin; }

輸出：

.my-mixin { color: black;
} //此處並沒有輸出 .my-other-mixin .class { color: black; background: wheat;
}

3.2 選擇器在mixin的用法

mixin不僅可以包含屬性，還可以包含選擇器

.my-hover-mixin(){ &:hover{ border: 1px solid red;
    } } button{ .my-hover-mixin(); }

輸出：

button:hover { border: 1px solid red;
}

3.3 命令空間  Namespaces

如果想要在一個更復雜的選擇器中混合屬性，可以堆疊多個id或類

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

同樣，上面的 > 符號是可選的，

// 下面寫法都一樣
#outer > .inner;
#outer > .inner();
#outer.inner;
#outer.inner();

這種使用方法被稱為命名空間。您可以將mixin置於id選擇器之下，這樣可以確保它不會和另一個庫沖突。

#my-library { .my-mixin() { color: black;
  } } // which can be used like this .class { #my-library > .my-mixin(); }

3.4 !important 關鍵字

在mixin后使用 !important 關鍵字，將會標記調用所有繼承的屬性為!important

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

輸出：

.unimportant { background: #f5f5f5; color: #900;
} .important { background: #f5f5f5 !important; color: #900 !important;
}

四、帶參數的Mixin

如何將參數傳遞給mixin？

mixin還可以接受參數，這些參數在混合時傳遞給選擇器塊。舉例：

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

下面是我們如何將其混合到各種規則中:

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

參數mixin還可以為其參數設置默認值

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

我們現在可以這樣來調用:

#header { .border-radius; }

你也可以使用不帶參數的參數混合。如果您希望從CSS輸出中隱藏規則集，但希望將其屬性包含在其他規則集中，則這非常有用：

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

輸出如下：此案例同 上方 3.1

pre { text-wrap: wrap; white-space: -moz-pre-wrap; white-space: pre-wrap; word-wrap: break-word;
}

4.1 mixin中包含多個參數 - Mixins With Multiple Parameters

參數是 分號 或 逗號 分割的。

建議使用分號。因為逗號有雙重含義：它既可以被解釋為mixin參數的分隔符，也可以作為css列表分隔符，容易混淆。

如果使用逗號作為mixin分隔符，那么就不可能創建使用逗號分隔的列表作為參數。另一方面，如果編譯器在mixin調用或聲明中看到至少一個分號，那么它假設參數由分號分隔，所有逗號都屬於css列表：

• 兩個參數和每個包含逗號分隔的列表: .name(1, 2, 3; something, else)
• 三個參數，每個參數包含一個數字：.name(1, 2, 3)
• 使用假分號來創建一個包含逗號分隔的css列表的mixin調用：.name(1, 2, 3;)
• 逗號分隔的默認值：.name(@param1: red, blue;)

定義多個具有相同名稱和參數的mixin是合法的。Less將使用所有可以應用的屬性。如果你用mixin與一個參數，例如，. mixin(green)，那么就會使用所有具有一個強制參數的mixin屬性：

.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;
} .some .selector div{ .mixin(#008000); }

輸出：

.some .selector div { color-1: #008000; color-2: #008000; padding-2: 2;
}

4.2 命令參數 

mixin引用的時候僅使用參數名稱引用即可，不需要有任何特殊的順序

.class1(@color:black;@margin:10px;@padding:20px){ color: @color; margin: @margin; padding: @padding;
} .demo1{ .class1(@margin:20px; @color:#33acfe);
} .demo2{ .class1(#efca33; @padding:40px;) }

輸出：

.demo1 { color: #33acfe; margin: 20px; padding: 20px;
} .demo2 { color: #efca33; margin: 10px; padding: 40px;
}

4.3  @arguments變量 

@arguments在mixin中有一個特殊的含義，它包含所有傳入的參數，當mixin被調用時。如果你不想處理個別參數，這很有用:

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

輸出：

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

4.4  高級參數和@rest變量 

您可以使用  …  ，如果你想讓你的mixin采取一個可變數目的參數。在變量名之后使用這個變量會將這些參數賦給變量。

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

此外，

.mixin(@a; @rest...) { // @rest綁定到 @a 之后的參數 // @arguments 綁定到所有參數 }

4.5 模式匹配  

有時，您可能希望根據你傳遞給它的參數來更改mixin的行為。讓我們從一些基本的東西開始:

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

現在我們想要 .mixin的行為方式不同，基於@ switch的值，我們可以像這樣定義 .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定義不匹配，因為它設置第一個參數是 dark 。
• 第二個mixin定義匹配，因為它設置的參數是 light。
• 第三個mixin定義匹配，因為它設置的參數為  任何值。

只有匹配到的 mixin 定義才會被使用，變量可以匹配並綁定到任何值。除了變量之外的，其他任何東西都只匹配一個與自身相等的值。

這里我們也可以對顏色的濃度進行匹配，例如:

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

現在如果我們使用 .mixin只定義一個參數，我們將得到第一個定義的輸出，但是如果我們用兩個參數調用它，我們將得到第二個定義，即顏色值為 @ a淡入到 @ b。