什么是 SASS？
SASS（Syntactically Awesome Style Sheets）是一种 CSS 预处理器，它通过一系列强大的编程语言功能，使得编写 CSS 样式变得更简单、更有效率。SASS 支持变量、函数、嵌套、继承和混合等特性，它不仅能够使 CSS 编写更加方便，还可以提供更多的维护和扩展性。
SASS 中的循环语句
循环语句是 SASS 中非常重要的一部分，它使得开发者可以更加灵活地使用样式变量和控制结构。SASS 提供了两种循环语句：@for 和 @each。
@for 循环
@for 循环是用来生成一系列有规律的样式变量的。@for 循环有三个参数：循环变量、起始值和结束值。循环变量在每次循环时都会被赋成一个新的值，从而生成一系列有规律的样式。
下面是一个使用 @for 循环生成样式的简单例子：
@for $i from 1 through 5 {
.col-#{$i} {
width: 20px * $i;
}
}上面的代码会生成五个类名为 col-1、col-2、col-3、col-4 和 col-5 的样式，这些样式的宽度分别是 20px、40px、60px、80px 和 100px。
@each 循环
@each 循环用于遍历一个列表或一个 Map 数据结构。@each 循环有两个参数：循环变量和列表或 Map。
下面是一个使用 @each 循环遍历 Map 的例子：
-- -------------------- ---- -------
-------- -
-------- --------
---------- --------
-------- --------
------- --------
-------- --------
----- --------
------ --------
----- -------
--
----- ------ ------ -- ------- -
------------ -
----------------- -------
-
-上面的代码会生成八个类名为 bg-primary、bg-secondary、bg-success、bg-danger、bg-warning、bg-info、bg-light 和 bg-dark 的样式，这些样式的背景颜色分别和 Map 的对应值相同。
循环语句的注意事项
在使用循环语句时，需要注意以下几个问题：
- 不要滥用循环语句。循环语句虽然强大，但如果使用不当，会影响代码的可读性和效率。
- 循环语句中可以使用 break 和 continue 控制语句。break 表示退出循环，而 continue 表示跳过当前循环，直接进行下一次循环。
- 循环语句中可以嵌套循环语句，但要注意代码的可读性和效率。
总结
循环语句是 SASS 中非常重要的一部分，它可以帮助开发者更加灵活地使用样式变量和控制结构。在实际开发中，合理地使用循环语句可以提高开发效率和代码质量，但需要注意循环语句的使用不当会带来一定的问题。因此，在使用循环语句时，需要根据实际情况进行灵活运用，同时要注意代码的可读性和效率。
参考代码：
-- -------------------- ---- -------
-- ---- ------
---- -- ---- - ------- - -
---------- -
------ ---- - ---
-
-
-- ----- ---- ---
-------- -
-------- --------
---------- --------
-------- --------
------- --------
-------- --------
----- --------
------ --------
----- -------
--
----- ------ ------ -- ------- -
------------ -
----------------- -------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649bfde948841e98948c2e62