css - sass循环问题

问题描述

问 题

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

解决方案

发现刚才理解错误了，是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都会有颜色了

这篇关于css - sass循环问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！