在前端开发中，CSS 是不可避免的一部分。而在 CSS 中，有很多常见的属性，例如颜色、字体、边框等等。在编写 CSS 时，经常需要手动为每个元素添加这些属性，这样会导致代码冗余且难以维护。在这种情况下，使用 SASS 中的 @each 循环语句可以很好地解决这个问题。
什么是 SASS？
SASS 是一种 CSS 预处理器，它可以让开发者使用类似编程语言的方式编写 CSS。SASS 可以提供许多功能，如变量、嵌套、混合、继承和函数等。这些功能可以让 CSS 更加模块化、可读性更高、易于维护。
什么是 @each 循环语句？
@each 循环语句是 SASS 中的一种循环语句，它可以循环遍历一个列表并执行一些操作。@each 循环语句的语法如下：
@each $var in <list> // do something with $var
其中，$var 是循环变量，<list> 是需要循环遍历的列表。
我们可以使用 @each 循环语句来生成常见的 CSS 属性，例如颜色、字体、边框等等。下面是一些示例代码：
生成颜色属性
-- -------------------- ---- -------
-------- -
-------- --------
---------- --------
-------- --------
------- --------
-------- --------
----- --------
------ --------
----- -------
--
----- ------ ------ -- ------- -
-------------- -
------ -------
-
------------ -
----------------- -------
-
---------------- -
------------- -------
-
-在上面的示例中，我们定义了一个颜色列表 $colors，然后使用 @each 循环语句遍历这个列表，并为每个颜色生成三个属性：文本颜色、背景颜色和边框颜色。
生成字体属性
-- -------------------- ---- -------
------- -
----------- ---------- ------ ---------- ------ -----------
------ -------- ------ --- ------- ------ ------
---------- -------- ----- -------- ---------
--
----- ------ ----- -- ------ -
-------------- -
------------ ------
-
-在上面的示例中，我们定义了一个字体列表 $fonts，然后使用 @each 循环语句遍历这个列表，并为每个字体生成一个属性：字体。
生成边框属性
-- -------------------- ---- -------
--------- -
----- -----
------ ------
------- -------
------- ------
--
----- ------ ------ -- -------- -
---------------- -
------------- -------
-
-在上面的示例中，我们定义了一个边框列表 $borders，然后使用 @each 循环语句遍历这个列表，并为每个边框样式生成一个属性：边框样式。
总结
使用 SASS 中的 @each 循环语句可以很好地生成常见的 CSS 属性，这样可以减少代码冗余且易于维护。在使用 @each 循环语句时，需要注意变量名和列表名称的命名规范，以及循环变量的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657951d3d2f5e1655d3565ef
