Mixin 與變數引數

在 mixins 中有一些情況，在使用它時可以有單個或多個引數。讓我們來看一個 border-radius 的情況，其中可以有像 border-radius:4px; 這樣的單個引數或像 border-radius:4px 3px 2px 1px; 這樣的多個引數。

傳統的關鍵字引數混合將如下所示： -

@mixin radius($rad1, $rad2, $rad3, $rad4){
 -webkit-border-radius: $rad1 $rad2 $rad3 $rad4;
 -moz-border-radius: $rad1 $rad2 $rad3 $rad4;
 -ms-border-radius: $rad1 $rad2 $rad3 $rad4;
 -o-border-radius: $rad1 $rad2 $rad3 $rad4;
 border-radius: $rad1 $rad2 $rad3 $rad4;
}

並用作

.foo{
    @include radius(2px, 3px, 5px, 6px)
}

上面的例子很複雜（程式碼，讀取和維護），如果你不能只傳遞一個值或兩個值，它將丟擲一個錯誤，並且要使用一個，兩個或那些值，你必須定義另外三個 mixin。

通過使用變數 Argument，你不必擔心可以傳遞多少個引數。可以通過定義變數名稱後跟三個點（…） 來宣告變數引數。以下是變數引數的示例。

@mixin radius($radius...)
{  
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;
}

並用作

.foo{
    @include radius(2px 3px 5px 6px)
}
.foo2{
    @include radius(2px 3px)
}
.foo3{
    @include radius(2px)
}

上面的例子更簡單（程式碼，維護和讀取），你不必擔心將要提出多少引數 - 它是一個還是多個。

如果有多個引數，並且在任何情況下你想要訪問第二個引數，則可以通過編寫 propertyname : nth(variable_name, 2) 來完成。