动态

详情 返回 返回

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

Add a new 评论

Some HTML is okay.