Sass @each

Sass 的 @each 循环是一个非常有用的工具，它可以帮助你在循环中处理列表或映射中的每一项。这使得编写更简洁、更动态的 CSS 成为可能。在这个章节中，我们将深入探讨 @each 循环，并通过具体的例子来展示如何使用它。

列表中的 @each

列表是 @each 循环中最常见的数据结构之一。列表是一组值的集合，可以是数字、字符串或变量。让我们先来看看如何使用 @each 循环遍历列表。

$colors: red, green, blue;

@each $color in $colors {
  .color-#{$color} {
    background-color: $color;
  }
}

上述代码将生成以下 CSS：

// www.javascriptcn.com code example
.color-red {
  background-color: red;
}

.color-green {
  background-color: green;
}

.color-blue {
  background-color: blue;
}

通过这种方式，我们可以轻松地为每种颜色创建一个类，并且只需更改 $colors 列表即可快速更新样式。

映射中的 @each

映射是一种键值对的集合，通常用于存储相关数据。@each 循环同样适用于映射，允许我们访问键和值。

// www.javascriptcn.com code example
$fonts: (
  serif: "Times New Roman",
  sans-serif: "Arial",
  cursive: "Pacifico"
);

@each $family, $font in $fonts {
  .font-#{$family} {
    font-family: $font;
  }
}

上述代码将生成以下 CSS：

// www.javascriptcn.com code example
.font-serif {
  font-family: "Times New Roman";
}

.font-sans-serif {
  font-family: "Arial";
}

.font-cursive {
  font-family: "Pacifico";
}

在这个例子中，我们使用了 $family 变量来表示映射中的键，而 $font 变量表示映射中的值。这样，我们可以根据不同的字体族名生成相应的 CSS 规则。

结合其他控制指令

@each 循环可以与其他 Sass 控制指令结合使用，例如 @if 或 @else，以便在特定条件下应用样式。

// www.javascriptcn.com code example
$primary-colors: (
  primary: #3498db,
  secondary: #2ecc71,
  tertiary: #e67e22
);

@each $name, $color in $primary-colors {
  .btn-#{$name} {
    border-color: $color;
    
    @if $name == 'secondary' {
      color: darken($color, 50%);
    } @else {
      color: white;
    }
  }
}

这段代码将生成如下 CSS：

// www.javascriptcn.com code example
.btn-primary {
  border-color: #3498db;
  color: white;
}

.btn-secondary {
  border-color: #2ecc71;
  color: #1a5f38;
}

.btn-tertiary {
  border-color: #e67e22;
  color: white;
}

这里我们使用了一个条件判断 (@if) 来决定按钮的颜色。当按钮类型为 "secondary" 时，我们使用较深的颜色；否则，使用白色文本。

总结

@each 循环是 Sass 中处理列表和映射的强大工具。通过这个循环，我们可以避免重复的代码，使样式更加动态和可维护。无论是在列表还是映射中，都可以轻松地遍历元素并生成相应的 CSS 规则。此外，结合其他控制指令，可以进一步增强我们的样式逻辑。

希望这些示例能够帮助你更好地理解和使用 @each 循环！