使用 Stylus 循环生成选择器

Question

在 Stylus 中，我尝试根据颜色数组生成 :nth-of-type() 选择器。这实际上是我第一次在手写笔中使用数组，所以根据我在 examples.

中看到的无分号和无括号的语法，我有点困惑

目标是具有以下等价物：

.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) 中收到编译错误，所以我想知道我的语法哪里错了。

Answer 1

您不能在嵌套块中混用缩进样式和括号样式。当 Stylus 看到括号样式的块时，它会假设块内的所有嵌套块也都带有括号。

Answer 2

好的。所以，这个问题是独特的 - 主要是因为循环中使用了 2 个数组。您可能需要重命名该问题以供将来搜索。

首先，我花了很长时间才意识到我需要认真对待错误消息。在你的情况下 - 它告诉你 有括号 - 不应该 - 所以它们是意外的。删除它们。 Stylus 语法大部分就像 SCSS - 你所要做的就是输入更少的东西 - 并确保你的缩进是完美的。缩进代替括号以阐明规则的开始和结束。删除所有括号 - 和分号。 *（旁注 - 对变量使用 $var / 稍后可能需要它们 - 另外 - : 曾经是一个选项 - 它们也将是必需的）

Second，我猜这个 for 循环就像 Javascript 中的 each 循环，所以你可以得到 currentvalue, currentIndex, fullArray参数以逗号分隔列表。（我对此不是 100%）

for fillColor, currentIndex in $fillColorArray

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

这里是活生生的例子：https://codepen.io/sheriffderek/pen/64c6791116c3a180cb196610f9962f17/ - 你可以在手写笔窗格的小箭头图标中选择查看已编译的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>

...

您可以通过几种方式执行此操作 - 取决于应用程序。这是一个包含 2 个循环的示例 - 另一个包含一个循环的示例。

手写笔

$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]

使用 Stylus 循环生成选择器

Generating selectors with Stylus loop

loops

stylus