1

只是一个（希望）关于 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);    
}
4

1 回答 1

2

LESS 支持通过变量访问所有传递给 mixin 的@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 评估（使用反引号）来保留逗号 - 否则，我们会得到background: linear-gradient(top, #color-1 #color-2 #color-n);，这当然是不正确的。

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

.gradient(#FFF, #CCC, #000) // A valid invocation of the mixin
于 2013-08-21T06:21:53.517 回答