Sass @each 规则

Sass @each 规则是 Sass 预处理器中一个强大的循环功能，它允许开发者迭代一个列表或映射，并对每个项执行相同的操作。

用法

@each 规则使用以下语法：

@each $var in <list or map> {
  // 匹配项中执行的操作
}

其中，$var 是变量名，它代表每个匹配项； 是要迭代的列表或映射。在操作中，可以使用 $var 来引用每个匹配项。

示例

下面的示例演示如何使用 @each 规则来生成多个 CSS 类：

$colors: (primary: #007bff, success: #28a745, danger: #dc3545);

@each $name, $color in $colors {
  .btn-#{$name} {
    background-color: $color;
    color: #fff;
  }
}

上述代码中，我们定义了一个名为 $colors 的映射，其中包含三个颜色值。然后，我们使用 @each 规则来遍历这个映射，并生成如下 CSS 样式：

.btn-primary {
  background-color: #007bff;
  color: #fff;
}

.btn-success {
  background-color: #28a745;
  color: #fff;
}

.btn-danger {
  background-color: #dc3545;
  color: #fff;
}

上述代码中，我们使用了 Sass 插值语法将 $name 变量嵌入到类名中，以便为每个颜色生成一个单独的类。

总结

使用 Sass @each 规则能够大大简化 CSS 样式表的编写，尤其是在需要生成大量类似样式的情况下。此功能可以用于遍历列表或映射，并对每个项执行相同的操作。