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) 來完成