介绍
SASS 是一种 CSS 预处理器，它允许开发者使用类似编程语言的编写方式，去编写样式，而 SASS 中的流程控制语句则是其中非常重要的一部分。
流程控制语句是指在程序执行时，根据不同的条件或者情况，来执行不同的代码块。SASS 中的流程控制语句包括 if 语句、for 语句、each 语句、while 语句等等，这些语句可以帮助开发者更加高效地写出样式。
if 语句
在 SASS 中，if 语句的使用非常类似于其他编程语言，语法也很简单：
@if <condition> {
// 如果 condition 为真，那么执行此处代码
} @else if <condition> {
// 如果之前的 condition 为假，但是这个 condition 为真，则执行此处代码
} @else {
// 如果前面的 condition 都为假，则执行此处代码
}其中的 condition 就是一个表达式，可以是任何布尔类型的值。下面是一个简单的例子：
$color: #fff;
@if $color == #ffffff {
background-color: $color;
} @else {
background-color: #000;
}在这个例子中，我们使用了 if 语句来判断变量 $color 的值是否等于 #ffffff，如果相等，则设置元素的背景色为 $color，否则设置为黑色。
for 语句
for 语句是一种循环语句，它可以帮助我们在样式中重复一些类似的操作。在 SASS 中，for 语句的语法如下：
@for $var from <start> through <end> {
// 循环体
}其中，$var 是循环变量，用于记录当前循环的次数，<start> 表示循环的起始值，<end> 表示循环的结束值。
下面是一个计算 1-10 的自然数之和的例子：
// javascriptcn.com 代码示例
$sum: 0;
@for $i from 1 through 10 {
$sum: $sum + $i;
}
body:after {
content: "1 + 2 + 3 + ... + 10 = #{$sum}";
}在这个例子中，我们使用了 for 语句来计算自然数 1-10 的和，并将结果输出到页面上。
each 语句
each 语句也是一种循环语句，它类似于 for 语句，但是可以遍历任何 Sass 数据类型中的内容，例如列表、映射等等。在 SASS 中，each 语句的语法如下：
@each $var in <list> {
// 循环体
}其中，$var 表示每次循环中取出的变量名，<list> 表示列表、映射等数据类型，例如列表 1, 2, 3：
@each $num in 1, 2, 3 {
.item-#{$num} {
width: 100px;
height: 100px;
}
}在这个例子中，我们使用了 each 语句循环输出了三个类名为 .item-1、.item-2、.item-3 的样式。
while 语句
while 语句也是一种循环语句，它可以根据某个条件进行循环。在 SASS 中，while 语句的语法如下：
@while <condition> {
// 循环体
}其中，<condition> 表示循环的条件，只有当条件为真时才会执行循环体内的代码。下面是一个例子：
// javascriptcn.com 代码示例
$num: 6;
@while $num > 0 {
.item-#{$num} {
width: 100px;
height: 100px;
}
$num: $num - 1;
}在这个例子中，我们使用了 while 语句循环输出了六个类名为 .item-6、.item-5、.item-4、.item-3、.item-2、.item-1 的样式。
总结
SASS 中的流程控制语句可以帮助开发者更加高效地编写样式，可以通过 if 语句进行条件判断，通过 for、each、while 等语句进行循环操作。开发者可以根据实际需求，灵活地应用这些语句，提高开发效率。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fb1a1ef6b2d6eab31c9b49