Question

关于LESS Mixins的一个（希望）快速问题：这两个mixin可以以某种方式组合吗？因为它们共享很多相同的信息，只需添加一个额外的颜色。

.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

LESS支持通过@arguments变量访问传递给mixin的所有参数：

.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评估（使用反引号）来保留逗号 - 否则，我们会得到background: linear-gradient(top, #color-1 #color-2 #color-n);，这当然是不正确的。

这个mixin做的另一件事就是通过“rest”符号（...）接受2个或更多参数 - 这让我们可以用三种颜色和两种颜色调用混合：

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

关于LESS Mixins的信息

1 个答案: