SASS 是一种流行的 CSS 预处理器，可以帮助前端开发人员更加高效地组织 CSS 代码。其中，@each 循环是 SASS 中的一种强大的功能，可以帮助我们更加方便地生成不同的 CSS 样式表。本文将深入介绍 SASS 中的 @each 循环，并提供实用的示例代码和技巧。
什么是 @each 循环？
在 SASS 中，@each 循环是一种用于循环遍历集合（例如列表或映射）中每个元素的命令。通过 @each 循环，我们可以将集合中的每个元素作为变量，使用其值执行一些操作，最终生成不同的 CSS 样式表，从而在 CSS 样式表中实现灵活的控制。
@each 循环的语法格式如下：
@each $var in <list or map> {
// 循环体
}其中，$var 表示集合中的每个元素，<list> 表示遍历的集合，循环体是具体的操作内容。需要注意的是，集合可以是 SASS 中的列表或映射。
如何在 SASS 中使用 @each 循环生成不同的 CSS 样式表？
为了更好地理解 @each 循环的应用，以下将介绍三个实用的示例，可以帮助你更好地掌握 @each 循环的用法。
- 使用 @each 循环实现 CSS 样式表的拆分
通过 @each 循环，我们可以将 CSS 样式表按照某些规则拆分成不同的样式表，从而实现样式的细化控制。
假设我们有以下样式表：
-- -------------------- ---- -------
-------- -
-------- --------
---------- --------
-------- --------
------- --------
-------- --------
----- --------
------ --------
----- -------
--
----- ------- ------ -- ------- -
--------------- -
------ -------
-
------------- -
----------------- -------
-
-在这个例子中，我们使用了 SASS 中的映射结构 $colors，以集合元素的方式存储颜色及其值。我们通过 @each 循环遍历 $colors 集合，将每个颜色的名字（$color）和对应的颜色值（$value）作为变量，使用其值生成对应的CSS样式表。例如，.text-primary类将设置为{color：#007bff}。
- 使用 @each 循环实现自定义布局类
在许多项目中，我们需要自定义一些常用的布局类，例如“ .container”、“ .row”、“ .col-md”等。通过使用 @each循环，我们可以快速生成这些类，并且可以动态地控制它们的样式。
假设我们想要生成这些类：
-- -------------------- ---- ------- ---------- - ---------- ------- - ---- - -------- ----- ---------- ----- ------- ------ - -------- - ---------- -- -------- ----- -
我们可以通过以下代码来生成这些类：
-- -------------------- ---- -------
------------------ -
--- --
--- ------
--- ------
--- ------
--
------------ -
--- ------
--- ------
--- ------
--- ------
--
---------------------- -
--- ----------------
--- ----------------
--- ----------------
--- ---------------
--
------ -------------------------- -
---------- -----------
------------- -----
------------ -----
-
----- ------------ -------------------- -- --------------------- -
------------------------- -
-------- -------------------------------------
-
-
---- -
-------- -----
---------- -----
------------ ------
------------- ------
-
----- ------------ ----- -- ----------------- -
---- -- ---- - ------- -- -
------------------------- -
------ -- - -- - -----
-
-
-需要注意的是，这里我们使用了两个映射结构 $max-widths、$container-max-widths，分别用于指定不同屏幕大小的最大宽度。同时，我们还使用了 SASS 中的 mixin 和 for 循环，以控制每个布局类的样式。
- 使用 @each 循环实现自定义字体类
在一些复杂的项目中，我们不仅需要自定义常用的布局类，还需要使用自定义字体类。通过使用 @each 循环，我们可以轻松生成自定义的字体类，并且可以使用变量来控制字体样式。
假设我们有以下变量：
-- -------------------- ---- -------
------- -
-------- -------
--------- ---- ----
--
-------------- -
------ ----
-------- ----
------- ----
----- ---
--
----- ------ ----- -- ------ -
----- -------- ------ -- ------------- -
--------------------- - -- ----------------- -
------------ ------
------------ -------
-
-
-在这个例子中，我们使用两个映射结构$fonts、$font-weights来指定字体类型和字体的不同权重。通过使用@each循环，我们遍历 $fonts 和 $font-weights，将每个字体的名字（$name）和字重（$weight）作为变量，使用其值生成自定义的字体类。例如，.default--bold类将设置为{font-family：Roboto; font-weight：700}。
总结
通过使用 @each 循环，我们可以更加方便地生成不同的 CSS 样式表，控制和优化页面样式。借助于上述实用的示例代码和技巧，相信你也可以更好地掌握如何在 SASS 中利用 @each 循环实现自定义样式表。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ae1af048841e9894a14f61