Question

我正在尝试使用Stylus和nib扩展创建线性渐变。如果我传入单独的参数，一切正常：

background linear-gradient( 90deg, #000 0%, #FFF 10%, #000 20% )

但是，我需要在循环中构建渐变。我正在使用一个变量，只是在其上添加更多值：

// pseudo-code

grid = 90deg

for percent in percents
  push(grid, #000 percent)

background linear-gradient(grid)

我遇到了问题。线性梯度mixin认为整个列表是一个参数，而它期待个别色彩停止。有没有办法在Stylus中列出一个列表并将其传递给函数作为多个参数？

Answer 1

linear-gradient()
  unquote('linear-gradient(' + join(', ', arguments) + ')')

percents = 10% 20% 30%

grid = 90deg

for percent in percents
  push(grid, #000 percent)

body
  background linear-gradient(grid)

<强>说明

嗯，基本上，Stylus中有两种类型的列表。第一个 - 表达式，它是一个没有逗号的列表（例如1 2 3），第二个 - 带有逗号的列表（例如Helvetica, Arial, sans-serif）。第二种类型的列表只是第一种，但带有isList内部标志（在编译阶段添加了逗号）。

函数的参数调用它是第一种类型的列表。目前没有办法将没有逗号的列表转换为带逗号的列表而不循环遍历该列表的项目。因此，我们需要按字面意思linear-gradient(<list of arguments with commas>)输出，为此我们使用unquote和join内置函数。

将列表作为函数参数传递给Stylus

1 个答案: