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);
}

您可以将mix {1}}替换为mixin中的@rest，因为您将整个输入用作＆＃34;变量参数列表＆＃34;。然后你也可以完全省略@arguments标识符：

@rest

两个版本之间没有区别。

但所有这些都不是你想要的。上面的两个解决方案将产生一个如下所示的CSS：

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

这是因为这些值被解释为单独的参数，并且在带有空格的字符串中连接。

你需要的是：

background: linear-gradient(red yellow blue);

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

LESS mixin中的变量参数列表

1 个答案: