是否可以使用Stylus在计算器中循环计数器？

Question

我正在尝试创建多个列而不使用Stylus逐个创建。这就是我到目前为止所做的：

for i in (1..2)
   .column-{i}
      /* random-prop */

代码的编译版本显示：

.column-1 { /* random-prop */ }
.column-2 { /* random-prop */ }

我试图像上面那样创建多个变量（仅用于测试）：

column-size-1 = 100%
column-size-2 = 50%

但是当我尝试做以前做过的事情时：

for i in (1..2)
   .column-{i}
      width column-size-{i}

它不起作用，我不知道为什么（我正在尝试学习新的东西，并且出现了Stylus）。

在Stylus中创建多个列的更好方法是什么，避免多次复制？

Answer 1

如果我可以进行修正：数组从零开始，所以你必须写：

colors = #f00, #0f0
for i in (0..1)
   .column-{i}
      background colors[i]

您可以使用colors变量代替数字来增强循环以循环遍历数组，这样如果将值添加到列表中，则不必更改循环中的数字。

<强>手写笔

colors = #f00, #0f0, #000
for color, i in colors
  i=i+1
  .column-{i}
    background color

<强>输出

.column-1 {
  background: #f00;
}
.column-2 {
  background: #0f0;
}
.column-3 {
  background: #000;
}

Answer 2

找到答案......我已经创建了一个数组（在文档中很难找到）并在循环中调用它，例如：

colors = #f00, #0f0
for i in (1..2)
   .column-{i}
      background colors[i]