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

【问题标题】：Is it possible to loop a counter in a property using Stylus?是否可以使用手写笔在属性中循环计数器？
【发布时间】：2016-07-20 17:30:45
【问题描述】：

我正在尝试创建多个列而不使用 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 中创建多列以避免多次复制的更好方法是什么？

【问题讨论】：

标签： css stylus

【解决方案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;
}

【讨论】：

【解决方案2】：

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

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

【讨论】：