Question

在their site上，他们举例说明了如何使用@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

受@ Allan的回答启发，我不得不使用以下内容将@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%);

Answer 2

你可以做这样的事情

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

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

你应该使用反向标记来运行一些javascript。但这意味着arguments数组中的所有元素都应该是有效的javascript变量，这就是为什么在调用mixin时你应该用引号括起所有参数来使它们成为javascript字符串。以上代码将编译为：

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

使用线性渐变（逗号）减少@arguments

2 个答案: