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) 来完成。