陪玩软件源码，SCSS遍历数组的实现

陪玩软件源码，SCSS遍历数组的实现

each遍历

$colors: (
      #00D477,
      #F57933,
      #0052F5
    );

  @each $c in $colors {
    $i: index($colors, $c);

    .tag-#{$i} {
      background-color: $c;
    }
  }

 

生成的结果如下：

.tag-1 {
  background-color: #00D477;
}

.tag-2 {
  background-color: #F57933;
}

.tag-3 {
  background-color: #0052F5;
}

 

for循环

$colors: (
    #00D477,
    #F57933,
    #0052F5
);

@for $i from 1 to 4 {
    .tag-#{$i} {
        background-color: nth($colors, $i)
    }
}

 

生成结果与上方一样，要注意的是to循环不到4
另外to换成through，但是后者可以走到4
以上就是陪玩软件源码，SCSS遍历数组的实现， 更多内容欢迎关注之后的文章