二、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;
}

現在, 如果我們執行:

?

| 12345 | @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。