LESS mixin中的变量参数列表[重复]

Question

我需要声明一个带有可变数量参数的 LESS mixin，并将其传递给 mixin，如下所示：

.linear-gradient(@color1, @color2) {
    background: -webkit-linear-gradient(@color1, @color2); 
    background: -o-linear-gradient(@color1, @color2); 
    background: -moz-linear-gradient(@color1, @color2);
    background: linear-gradient(@color1, @color2); 
}

.linear-gradient(@color1, @color2, @color3) { ...
.linear-gradient(@color1, @color2, @color3, @color4) { ...

... // usage with a variable number of arguments: 
body > header {
    .linear-gradient(red, yellow, blue);

如in the documentation 所述，我可以使用@arguments 和@rest 关键字，但我不太清楚在我的情况下应该如何使用它...

这里是my PEN for testing

Answer 1

@rest 不是关键字，它是用于演示... 的示例标识符。它可以有任何其他名称。

修复您的代码：

.linear-gradient(@rest...) {
    background: -webkit-linear-gradient(@rest); 
    background: -o-linear-gradient(@rest); 
    background: -moz-linear-gradient(@rest);
    background: linear-gradient(@rest); 
}

body > header {
    .linear-gradient(red, yellow, blue);
}

当您将整个输入用作“变量参数列表”时，您可以在 mixin 中将 @rest 替换为 @arguments。然后你也可以完全省略 @rest 标识符：

.linear-gradient(...) {
    background: -webkit-linear-gradient(@arguments); 
    background: -o-linear-gradient(@arguments); 
    background: -moz-linear-gradient(@arguments);
    background: linear-gradient(@arguments); 
}

这两个版本没有区别。

但这一切都不是你想要的。上面的 2 个解决方案将生成如下所示的 CSS：

background: linear-gradient(red yellow blue);

这是因为这些值被解释为单独的参数，并用空格连接成一个字符串。

你需要的是这个：

.linear-gradient(@colors) {
    background: -webkit-linear-gradient(@colors); 
    background: -o-linear-gradient(@colors); 
    background: -moz-linear-gradient(@colors);
    background: linear-gradient(@colors); 
}

body > header {
    .linear-gradient(red, yellow, blue;);
}

这告诉 LESS 传入 mixin 的参数是单个变量，里面有逗号。这转化为您所需的输出。