Each

2018-02-24 15:11 更新

@each 循环绝对是Sass提供的三个循环方式中最常用的。它提供了一个简洁的 API 来迭代列表或 map。

@each $theme in $themes {
  .section-#{$theme} {
    background-color: map-get($colors, $theme);
  }
}

当迭代一个 map 时,通常使用 $key 和 $value 作为变量名称来确保一致性。

@each $key, $value in $map {
  .section-#{$key} {
    background-color: $value;
  }
}

同时遵守下述规则,确保可读性:

  • each 前添加空行;
  • 除非下一行是右闭大括号(}),否则在所有右闭大括号(})后面添加新行。
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号