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

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

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

代码的编译版本显示：

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

我曾尝试创建多个变量，如上面所述（仅用于测试）：

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

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

它不工作，我也不知道为什么（我正在尝试学习一些新的东西，触笔出现了）

---

在手写笔中创建多个列以避免多次复制的更好方法是什么？

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

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

---

请允许我更正一下：数组从零开始，所以你必须写：

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

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