scss遍历数组

发表于 | 分类于 ，

使用scss遍历数组

each遍历

1
2
3
4
5
6
7
8
9
10
11
12
13
$colors: (
      #00D477,
      #F57933,
      #0052F5
    );

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

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

生成的结果如下：

1
2
3
4
5
6
7
8
9
10
11
12
.tag-1 {
  background-color: #00D477;
}

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

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

for循环

1
2
3
4
5
6
7
8
9
10
11
$colors: (
    #00D477,
    #F57933,
    #0052F5
);

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

生成结果与上方一样，要注意的是to循环不到4
另外to换成through，但是后者可以走到4