关于更少的混合器的信息

Question

只是(希望)一个关于更少的混合体的快速问题:这两个混合器能以某种方式组合吗?因为它们共享了很多相同的信息，所以其中一个会增加一个额外的颜色。

.gradient-top(@color-1, @color-2){
    background-color: @color-2;
    background: -webkit-linear-gradient(top, @color-1, @color-2);
    background: -moz-linear-gradient(top, @color-1, @color-2);
    background: -ms-linear-gradient(top, @color-1, @color-2);
    background: -o-linear-gradient(top, @color-1, @color-2);
    background: linear-gradient(top, @color-1, @color-2);
}

.gradient-middle(@color-1, @color-2, @color-3){
    background-color: @color-2;
    background: -webkit-linear-gradient(top, @color-1, @color-2, @color-3);
    background: -moz-linear-gradient(top, @color-1, @color-2, @color-3);
    background: -ms-linear-gradient(top, @color-1, @color-2, @color-3);
    background: -o-linear-gradient(top, @color-1, @color-2, @color-3);
    background: linear-gradient(top, @color-1, @color-2, @color-3);    
}

Answer 1

passed支持通过@arguments变量访问传递给混合器的所有参数：

.gradient(@color-1, @color-2, ...) {
    @gradient-stops: ~`"@{arguments}".slice(1, -1)`;
    background-color: @color-2;
    background: -webkit-linear-gradient(top, @gradient-stops);
    background: -moz-linear-gradient(top, @gradient-stops);
    background: -ms-linear-gradient(top, @gradient-stops);
    background: -o-linear-gradient(top, @gradient-stops);
    background: linear-gradient(top, @gradient-stops);
}

我们需要选择器内插(~)和内联JavaScript计算(使用backticks)来保留逗号-否则，我们将得到background: linear-gradient(top, #color-1 #color-2 #color-n);，这当然是不正确的。

这个混合器所做的另一件事是通过"rest“符号(...)接受2个或更多的参数--这允许我们将混合分为三种颜色和两种颜色：

.gradient(#FFF, #CCC, #000) // A valid invocation of the mixin