sass循环问题

Question

页面有多个通过循环遍历得到的标签，不确定个数，现在我想通过sass为每个标签附上不同的颜色，但是我在sass中的颜色数组只会有7个颜色元素，如何通过sass遍历确保每一个标签元素都能得到相应的样式。

Answer 1

发现刚才理解错误了，是7个颜色，然后数量不固定
那应该是SASS用@for，然后配合nth-child，7个就是7n+i

---

Sass代码

$ColorClass: (#111) (#222) (#333) (#444) (#555) (#666) (#777);

@mixin color($bgColor){
   background-color: $bgColor;
 
}
@for $i from 1 through 7{
    .item:nth-child(7n+#{$i}){
      @include color(nth($ColorClass,$i));
  }
}

生成的CSS：

.item:nth-child(7n+1) {
  background-color: #111;
}

.item:nth-child(7n+2) {
  background-color: #222;
}

.item:nth-child(7n+3) {
  background-color: #333;
}

.item:nth-child(7n+4) {
  background-color: #444;
}

.item:nth-child(7n+5) {
  background-color: #555;
}

.item:nth-child(7n+6) {
  background-color: #666;
}

.item:nth-child(7n+7) {
  background-color: #777;
}

然后为item加上样式，例如

.item{
width:100%;
height:100px;
}

HTML代码:加入有10个item

    <div class="item"> </div>
    <div class="item"> </div>
    <div class="item"> </div>
    <div class="item"> </div>
    <div class="item"> </div>
    <div class="item"> </div>
    <div class="item"> </div>
    <div class="item"> </div>
    <div class="item"> </div>
    <div class="item"> </div>

最终的效果：

这样每个item都会有颜色了

Answer 2

你得确定对应规则，看描述的意思好像没有必要sass循环，直接7个不同class对应相应样式，循环得到标签的时候带上需要的class名不就行了么

Answer 3

sass只是css的预处理，并不能循环判断怎么给页面添加样式，想要实现你所说的效果，建议用js实现，动态给标签添加样式

Answer 4

:nth-child()，你看下这个，你的描述不是很清晰，但感觉应该可以用这个。大致代码如下

some-elem{
  @for $i from 1 through 7 {
    $n: '';
    @if $i > 1 {
      $n: 7n+#{$i - 1};
    } @else {
      $n: 7n;
    }
    &:nth-child(#{$n}){
      color: nth($color, $i);
    }
  }
}

:nth-child