Sass 的 @each 循环是一个非常有用的工具，它可以帮助你在循环中处理列表或映射中的每一项。这使得编写更简洁、更动态的 CSS 成为可能。在这个章节中，我们将深入探讨 @each 循环，并通过具体的例子来展示如何使用它。
列表中的 @each
列表是 @each 循环中最常见的数据结构之一。列表是一组值的集合，可以是数字、字符串或变量。让我们先来看看如何使用 @each 循环遍历列表。
$colors: red, green, blue;
@each $color in $colors {
.color-#{$color} {
background-color: $color;
}
}上述代码将生成以下 CSS：
-- -------------------- ---- ------- ---------- - ----------------- ---- - ------------ - ----------------- ------ - ----------- - ----------------- ----- -
通过这种方式，我们可以轻松地为每种颜色创建一个类，并且只需更改 $colors 列表即可快速更新样式。
映射中的 @each
映射是一种键值对的集合，通常用于存储相关数据。@each 循环同样适用于映射，允许我们访问键和值。
-- -------------------- ---- -------
------- -
------ ------ --- -------
----------- --------
-------- ----------
--
----- -------- ----- -- ------ -
---------------- -
------------ ------
-
-上述代码将生成以下 CSS：
-- -------------------- ---- ------- ----------- - ------------ ------ --- ------- - ---------------- - ------------ -------- - ------------- - ------------ ----------- -
在这个例子中，我们使用了 $family 变量来表示映射中的键，而 $font 变量表示映射中的值。这样，我们可以根据不同的字体族名生成相应的 CSS 规则。
结合其他控制指令
@each 循环可以与其他 Sass 控制指令结合使用，例如 @if 或 @else，以便在特定条件下应用样式。
-- -------------------- ---- -------
---------------- -
-------- --------
---------- --------
--------- -------
--
----- ------ ------ -- --------------- -
------------- -
------------- -------
--- ----- -- ----------- -
------ -------------- -----
- ----- -
------ ------
-
-
-这段代码将生成如下 CSS：
-- -------------------- ---- ------- ------------ - ------------- -------- ------ ------ - -------------- - ------------- -------- ------ -------- - ------------- - ------------- -------- ------ ------ -
这里我们使用了一个条件判断 (@if) 来决定按钮的颜色。当按钮类型为 "secondary" 时，我们使用较深的颜色；否则，使用白色文本。
总结
@each 循环是 Sass 中处理列表和映射的强大工具。通过这个循环，我们可以避免重复的代码，使样式更加动态和可维护。无论是在列表还是映射中，都可以轻松地遍历元素并生成相应的 CSS 规则。此外，结合其他控制指令，可以进一步增强我们的样式逻辑。
希望这些示例能够帮助你更好地理解和使用 @each 循环！