是否可以使用手写笔在属性中循环计数器？

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 (1..2)
   .column-{i}
      background colors[i]

Answer 2

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

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;
}

Is it possible to loop a counter in a property using Stylus?