在 Sass 中，有许多控制指令（Control Directives）可以帮助开发者更好地管理代码，其中包括 if、for、while、each 等。这些指令都是为了让开发者能够更加方便地处理变量与选择器，从而使样式表更加灵活、易于维护。
if 指令
if 指令用于控制条件语句，常用于根据不同的条件输出不同的样式。if 指令语法如下：
@if 条件 {
样式代码
} @else if 条件 {
样式代码
} @else {
样式代码
}如果条件成立，则会执行 if 后面的代码；否则，会依次判断 else if 后面的条件，如果所有条件都不成立，则会执行 else 后面的代码。
示例代码：
-- -------------------- ---- -------
--------------- ----
-- ----- ------------- - --- --
--- -------------- -- --- -
---- -
------ ---------------
-
- ----- -- -------------- -- ---- -
---- -
------ ---------------
-
- ----- -
---- -
------ ------
-
-for 指令
for 指令用于循环，经常用于同时为多个元素设置相同的样式。for 指令语法如下：
@for $变量 from 起始值 through 终止值 {
样式代码
}示例代码：
/* 将 i 的取值从 1 到 3 逐个遍历 */
@for $i from 1 through 3 {
.box-#{$i} {
width: 10px * $i;
}
}此处的 #{} 是 Sass 中的变量插值方式，即将变量与字符串拼接在一起。
while 指令
while 指令用于循环，但是只有在满足条件的情况下才会执行循环体。while 指令语法如下：
@while 条件 {
样式代码
}示例代码：
-- -------------------- ---- -------
------- ------
--- --
-- --- -- ------ - ------- --
------ -- -- - -
---------- -
------ -------
-
------- ------ - -----
--- -- - --
-each 指令
each 指令用于循环，但是可以遍历多个变量。each 指令语法如下：
@each $变量 in 集合 {
样式代码
}示例代码：
$colors: red, blue, yellow;
/* 遍历数组 $colors，将每个颜色分别应用到每个 .box 元素上 */
@each $color in $colors {
.box-#{$color} {
color: $color;
}
}总结
通过以上的示例代码，我们可以看出，在 Sass 中，控制指令十分强大，能够帮助开发者更加方便地编写样式表。当我们需要遍历多个元素或者根据不同的条件输出不同的样式时，控制指令都可以派上用场。无论是 if、for、while 还是 each 指令，都可以为我们的样式表带来更好的灵活性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646f28ce968c7c53b0d8e318