变量的在LESS混入参数

Question

我需要声明一个LESS混入用的参数个数可变，并把它传递给混入，这样列表：

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

您可以用@arguments取代@rest的混入内部，所使用的整个输入作为一个“可变参数列表”。然后，你也可以完全忽略@rest标识符：

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

有2个版本之间没有区别。

但所有这一切都不是你想要的。上述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是通过插入混入的说法是一个变量，用逗号分隔的内线。这意味着您需要的输出。