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

我收到来自意外}（角度cli）的编译错误，所以我想知道我的语法错误。

Answer 1

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

Answer 2

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

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

第二次，我猜这个for循环就像是Javascript中的每个循环一样，所以你可以用逗号分隔列表获取currentvalue, currentIndex, fullArray个参数。（我不是百分之百）

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循环生成选择器

2 个答案: