變量的在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是通過插入混入的說法是一個變量，用逗號分隔的內線。這意味着您需要的輸出。