3

在他们的网站上，他们举了一个如何使用的例子@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...);

这可能用更少的钱吗？

4

2 回答 2

3

受@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%);
于 2013-03-29T16:50:44.780 回答
2

你可以做这样的事情

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

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

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

test {
 filter: gradient(x1,2,3);
}
于 2013-01-16T09:17:45.607 回答