前言
SASS 是一种动态样式语言，它能让我们用变量、嵌套、运算、函数等方式来写 CSS。其中，循环语句在 SASS 中是一个非常有用的语法，可以让我们更加高效地编写样式代码。
基本语法
在 SASS 中，支持两种循环语句：
@while循环：在满足条件的情况下，重复执行一段代码，直到条件不再成立。@for循环：固定次数地执行一段代码。
@while 循环
语法格式：
------ ---------- - -- ---- ----- -
其中，$condition 是一个表达式，只要表达式的值为 true，就会一直执行代码块里面的内容。
示例代码：
--- --
------ -- -- - -
----------- -
---------- ---- - -- - ----
-
--- -- - --
-上面的代码中，定义了变量 $i，然后使用 @while 循环输出 5 个 CSS 类名，并为每个类名设置不同的字体大小。在每次循环结束时，使用 $i: $i + 1 使变量 $i 自增。
@for 循环
语法格式：
---- ---- ---- ------- ------- ----- - -- ---- ----- -
其中，$var 是一个变量，将从 <start> 的值开始，逐次自增，直到达到 <end> 的值。在每次循环中，代码块都会被执行一次。
示例代码：
---- -- ---- - ------- - -
----------- -
---------- ---- - -- - ----
-
-使用 @for 循环实现与 @while 循环的效果相同。
应用场景
生成重复的样式规则
在开发过程中，可能需要多次重复使用某一个样式规则。使用 @for 循环可以轻松地生成多个相似的样式规则。
示例代码：
---- -- ---- - ------- - -
---------- -
------- --- ----- -----
-------- ---- - -----
---------- ---- - - - ------
-
-上面的代码将创建三个不同的按钮样式，每个按钮的样式都稍稍不同。
实现复杂的样式计算
使用 @for 循环可以实现复杂的样式计算，我们可以通过循环体内的计算来动态地生成样式。
示例代码：
---- -- ---- - ------- - -
------- ----- - --- - ---
----------- -
---------- ----------------
-
-上面的代码将生成六个不同的元素，每个元素都围绕自身的中心点进行旋转，角度分别为 0、60、120、180、240 和 300 度。这种写法可以让我们快速从抽象的代码中构建复杂的图形效果。
技巧与实践
避免循环太深
在 SASS 中，循环语句虽然提供了很多便利，但也容易导致逻辑过于复杂，难以维护。当我们使用循环语句时，一定要小心，尽可能地避免嵌套循环过深。
合理使用局部变量
在循环语句中，经常需要对变量进行自增或者改变，而循环内的变量改变可能会对后面的代码造成意想不到的影响。因此，我们需要合理使用 SASS 的局部变量，这种变量仅在本地生效，不会对全局造成影响。
灵活运用控制结构
SASS 中的控制结构可以实现多种变幻莫测的效果，我们只需要运用好它们，就能让代码更加灵活、高效。比如，我们可以在循环的代码块中运用 @if 判断结构，控制不同的执行分支，从而实现更加复杂的效果。
结论
本文介绍了 SASS 中的循环语句的应用与技巧，事实上，循环语句只是 SASS 更为强大的功能之一。对于前端开发者而言，熟练掌握 SASS 的各种语法特性，能够极大地提升开发效率，产出更加优秀的代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672995bb2e7021665e2501bf