SASS 是一种 CSS 预处理器，它允许我们使用变量、嵌套、函数等更高级的语言特性编写我们的样式表。其中循环和递归是 SASS 的两个非常强大的特性，可以帮助我们更方便地编写复杂的样式。
循环
循环是程序设计中的一个基本思想，它可以用于处理一系列相同或相似的任务。在 SASS 中，循环可以用于重复生成样式。
@for 循环
@for 循环是 SASS 中最常用的循环结构，它可以让我们按照指定的次数循环生成样式。
@for $i from 1 through 5 {
.box-#{$i} {
width: 10px * $i;
height: 10px * $i;
}
}上面的代码会生成 5 个类名为 .box-1 到 .box-5 的样式规则，每个规则的宽度和高度都是它的序号乘以 10 像素。
@each 循环
@each 循环可以用于遍历一个列表或地图，并对其中的每个项进行操作。
-- -------------------- ---- -------
-------- -
---------- --------
------------ --------
---------- --------
--------- -------
--
----- ------ ------ -- ------- -
------------- -
------ -------
----------------- --------------- -----
-
-上面的代码中，我们定义了一个颜色地图，然后使用 @each 循环遍历这个地图，并为每个颜色生成一个 .btn-颜色名 的样式规则，规则中包含颜色和一个经过亮度提高 10% 处理的背景色。
递归
递归是程序设计中的另一个重要思想，它可以用于处理自相似结构的数据。在 SASS 中，递归可以用于生成多层嵌套的样式。
@mixin 和 @include
在 SASS 中，@mixin 是一个函数式的概念，它可以接受参数并生成一组样式代码。@include 则用于在样式中插入这些样式代码。
-- -------------------- ---- ------- ------ ----------- ------ - ----------------- ------- ------ ------ ------- ------ - ------ -------------- - ----------- ------ ------ ------ ----- - ------ ---------------- - ------- ------ ----- ----- - ------ -------------- ------ ------- -------- - -------- ----------- ------- -------- --------------- -------- ------------------ -------- ----- - -- -
上面的代码中，我们定义了一些常见的样式代码，在需要使用它们的时候，可以使用 @include 引入这些代码，并传递参数定制化样式。接下来，我们可以使用递归来生成一些多层嵌套的样式。
-- -------------------- ---- -------
------ ------------------ ------ ------- -------- ------- -
-------- -------------- ------ ------- ---------
--- ------ - - -
-------- -----------
-------------- ---- ----- - ---- ------ - -- ------- - -- ------ - -
--
-
-
------- -
-------- ------------------- ----- ----- ---- ---
-上面的代码会生成一个多层嵌套的样式，每一层的样式会继承上一层的样式，并根据传入的参数调整样式。这种递归生成的样式，可以用于生成复杂的嵌套布局和特效。
总结
SASS 中的循环和递归让我们可以更方便地编写样式，特别是在需要处理大量样式代码或生成复杂的嵌套布局和特效的时候。掌握这两个特性，可以让我们的样式表更清晰、更简洁、更容易维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648c3cc748841e9894a9393f