Each
@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
前添加空行;- 除非下一行是右闭大括号(
}
),否则在所有右闭大括号(}
)后面添加新行。