循环

优质

小牛编辑

129浏览

2023-12-01

因为Sass提供了如 lists 和 maps 这样的复杂数据结构，所以对于提供给开发者遍历这些数据结构的能力也无需惊讶。

然而，循环的出现意味着存在本不可能出现在Sass中的复杂逻辑。在使用循环之前，务必确定这么做是有道理的，并且确认这么做可以解决问题。

Each

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

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

@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 $key, $value in $map
  .section-#{$key}
    background-color: $value

同时遵守下述规则，确保可读性：

当需要聚合伪类 :nth-* 的时候，使用 @for 循环很有用。除了这些使用场景，如果必须迭代最好还是使用 @each 循环。

@for $i from 1 through 10 {
  .foo:nth-of-type(#{$i}) {
    border-color: hsl($i * 36, 50%, 50%);
  }
}

@for $i from 1 through 10
  .foo:nth-of-type(#{$i})
    border-color: hsl($i * 36, 50%, 50%)

要坚持一贯的传统，始终使用 $i 作为变量名，除非有非常好的原因，否则永远不要使用 to 关键字：而是始终使用 through。许多开发者甚至不知道 Sass 有这个变化；使用它可能会造成混乱。

最后，确保遵循规范以保持可读性：

绝对没有必要在真实的 Sass 项目中使用 @while 循环——不要使用它。