與線性漸變（逗號）

Question

在their site少@arguments，他們給@arguments如何使用的例子：

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { 
    box-shadow: @arguments; 
    -moz-box-shadow: @arguments; 
    -webkit-box-shadow: @arguments; 
} 
.box-shadow(2px, 5px); 

導致：

box-shadow: 2px 5px 1px #000; 
    -moz-box-shadow: 2px 5px 1px #000; 
    -webkit-box-shadow: 2px 5px 1px #000; 

看來它只是通吃參數並用空格分隔它們。其實我是想的參數用逗號用於分隔用linear-gradient：

background: linear-gradient(top, @arg1, @arg2, @arg3...); 

這可能與少？

Answer 1

你可以做這樣的事情

.mixin(...) { 
    filter: gradient(~`@{arguments}.join(",")`); 
} 

test { 
.mixin("x1","x2","x3") 
} 

你應該使用反單引號，以便能夠運行一些JavaScript代碼。但這意味着arguments數組中的所有元素都應該是有效的javascript變量，這就是爲什麼在調用mixin時，應該將所有參數包含在引號中以使它們成爲javascript字符串。上面的代碼將被編譯爲：

test { 
filter: gradient(x1,2,3); 
} 

Answer 2

通過@艾倫的回答啓發，我不得不使用以下方法來獲取傳遞給一個線性漸變功能@arguments：

.linear-gradient-multi(...) { 
    background-image: -webkit-linear-gradient(~`"@{arguments}".slice(1,-1)`); 
    ... 
} 

只有到那時，我打電話mixin百分比和變量：

.linear-gradient-multi(left, #CCC 0%, #DDD @percent, #FFF @percent + 1, #FFF 100%);