Loops 使用手写笔循环生成选择器

在手写笔中，我试图基于颜色数组生成

：nth-of-type（）

选择器。这实际上是我第一次使用手写笔中的数组，所以对于我在中看到的无分号和无括号的语法，我有点困惑

目标是具有以下等效项：

.chart {
  li {
    display: flex;
    align-items: flex-end;

    &:nth-of-type(1) {
      background-color: #FFE3A9;
      span {
        background-color: #FFCC66;
      }
    }
    &:nth-of-type(2) {
      background-color: #FCCCA2;
      span {
        background-color: #F79850;
      }
    }
  }
}

我的尝试：

bg_colors = (#FFEDA9 #FDCCA2)
fill_colors = (#FFCD66 #FD9850)

.chart {
  li {
    display: flex;
    align-items: flex-end;

    for num in range(0, 1)
      &:nth-of-type({num})
        background-color: bg_colors[num]
        span
          background-color: fill_colors[num]
  }
}

---

我从一个意外的

}

（angular cli）中得到编译错误，所以我想知道我的语法哪里错了。

在嵌套块中不能混合使用缩进样式和方括号样式。当触控笔看到一个括号样式块时，它会假定块内的所有嵌套块也将带有括号。

确定。所以，这个问题是唯一的-主要是因为循环中使用了2个数组。您可能希望重命名该问题，以便将来进行搜索

首先，我花了很长时间才意识到我需要认真对待错误消息。在你的情况下——它告诉你有括号——不应该有括号——所以它们是出乎意料的。移除它们。手写笔语法基本上就像SCS一样——你所要做的就是少输入一些东西——并确保你的缩进是完美的。缩进取代了括号，以澄清规则的开始和结束。删除所有括号和分号*（旁注-变量使用$var/以后可能需要它们-另外-

：

曾经是一个选项-它们也将是必需的）

Second，我猜这个

for

循环类似于Javascript中的each循环，因此您可以使用逗号分隔的列表获取

currentvalue、currentIndex、fullArray

参数。（我不是100%赞成）

对于fillColor，当前索引为$fillColorArray

这将允许您作为这些占位符访问颜色及其索引

下面是一个生动的例子：-您可以选择在手写笔窗格的小箭头图标中查看已编译的CSS

加价

---

这不是一个答案。这是对“我想知道我的语法哪里错了”这个问题的答案。可能重复吗？即使是重复的，那里的答案对我也不起作用。谢谢你提供了详细的例子，但这类回答证实了@panya的答案，即不能将括号样式的符号（我在代码中使用的都是）与循环混合在一起。因此，为了能够使用循环，我必须将.styl文件转换为基于缩进的.Yes。手写笔文件不使用括号@panya确认您收到的错误是正确的，我也确认您的期望是可能的。另外，还有一个注意事项，正如@payna所暗示的：您可以在手写笔中使用括号，但您必须在整个规则中使用括号。有时候我从第三方那里得到了一点令人讨厌的CSS，我没有重写它，我只是让它成为普通的CSS，用括号括起来，它是完全好的。只是不要把它们混在同一块。

<ul class="chart-list one">
    <li class="chart">
        <span>Chart 1</span>
    </li>
    <li class="chart">
        <span>Chart 2</span>
    </li>
    <li class="chart">
        <span>Chart 3</span>
    </li>
    <li class="chart">
        <span>Chart 4</span>
    </li>
</ul>

...

$fillColorArray = (#f06 pink)
$textColorArray = (white #f06)

remove-list-styles()
    list-style: none
    margin: 0
    padding: 0

.chart-list
    remove-list-styles()
    margin-bottom: 2rem
    background: lightgray
    .chart
        padding: 1rem

.chart-list.one
    //
    .chart
        //
        for fillColor, currentIndex in $fillColorArray
            &:nth-of-type({currentIndex + 1})
                background: fillColor
        for textColor, currentIndex in $textColorArray
            &:nth-of-type({currentIndex + 1})
                span
                    color: textColor

.chart-list.two
    //
    .chart
        //
        for fillColor, currentIndex in $fillColorArray
            &:nth-of-type({currentIndex + 1})
                background: fillColor
                span
                    color: $textColorArray[currentIndex]

// &:nth-of-type( 2n + {currentIndex + 1})
// if you want it to repeat at those intervals
.chart-list.three
    //
    .chart
        //
        for fillColor, currentIndex in $fillColorArray
            &:nth-of-type( 2n + {currentIndex + 1})
                background: fillColor
                span
                    color: $textColorArray[currentIndex]