html - 在 Sass 中使用 @for 将颜色列表应用于相同类型的元素

Question

我在这个元素中使用 Bourbon、Neat 和 Bitters，并且我从 Refills 获得了一堆代码。

我有一个颜色列表，需要分别应用于 6 个不同的 h2 元素。

我已经在元素的其他地方以类似的方式成功地做到了这一点，但我很难在这里翻译它。

我尝试过的所有方法都只会将第一种颜色应用于所有 h2 元素。如果我在第 n 个 $i 之后添加一个数字，如 nth($colors, $i+1)，它会将列表中的第二种颜色应用于所有颜色。

奇怪的是，CSS 输出是正确的，但问题似乎与 nth-of-type 有关，因为只有 nth-of-type(1) 出现。

这是我目前所拥有的重要部分:

.bullets {
  $icon-bullet-size: 3.5em;
  $colors:
      desaturate($logo-blue, 30),
      desaturate($logo-green, 10),
      desaturate($logo-yellow, 30),
      desaturate($badred, 30),
      desaturate($goldenrod, 30);

  padding: 2em;
  overflow: auto;
  margin-bottom: $base-line-height;
  text-align: center;


  h2 {
    @for $i from 1 to length($colors) {
      &:nth-of-type(#{$i}) {
        $color-from-list: nth($colors, $i);
        color: $color-from-list;
      }
    }
  }
}

h2 元素嵌套了几层，如下所示:

<ul class="bullets">
<li class="bullet three-col-bullet">
  <div class="bullet-content">
    <h2>This needs to be one color</h2>
    <p>some content</p>
    </div>
</li>  
<li class="bullet three-col-bullet">
  <div class="bullet-content">
    <h2>This is a second color</h2>
    <p>content</p>
  </div>
</li>
<li class="bullet three-col-bullet">
  <div class="bullet-content">
    <h2>Radisson Hotel Salt Lake City</h2>
    <p>215 West South Temple<br>
      $129 USD—standard room<br>
      $139/$149 USD—triple/quad
    </p>
  </div>
</li>    
</ul>

这是我正在努力完成的一个很好的例子 can be found here

我引用了 this post也尝试了建议的解决方案。

我哪里错了？感谢您的帮助!

Answer 1

你的逻辑不正确。 :nth-of-type(n) 选择器用于兄弟元素。你的 h2 元素都不是彼此的 sibling 。 li 元素是 sibling ，h2 元素是它们的后代:

@for $i from 1 to length($colors) {
  li:nth-of-type(#{$i}) h2 {
    $color-from-list: nth($colors, $i);
    color: $color-from-list;
  }
}

http://sassmeister.com/gist/0b0c4793f58bc457c148