在前端开发中，CSS 样式的编写是必不可少的一项工作。然而，当样式文件变得越来越复杂时，手动编写 CSS 样式会变得越来越繁琐，且容易出现错误。为了解决这个问题，我们需要使用一些工具来帮助我们更高效地编写 CSS 样式，其中 SASS 循环语句就是一个非常实用的工具。
SASS 循环语句介绍
SASS 是一种 CSS 预处理器，它可以将 SASS 代码编译成标准的 CSS 代码。SASS 提供了很多强大的特性，其中循环语句就是其中之一。循环语句可以让我们在编写样式时更加高效，同时减少出错的可能性。
SASS 中的循环语句有两种形式：@for 和 @each。@for 可以让我们按照一定的规律重复生成样式代码，而 @each 可以让我们遍历一个列表，并为列表中的每个元素生成样式代码。
@for 循环语句
@for 循环语句可以让我们按照一定的规律重复生成样式代码。下面是一个简单的 @for 循环语句的示例：
@for $i from 1 through 5 {
.box-#{$i} {
width: 10px * $i;
}
}上面的代码中，$i 是一个变量，从 1 开始循环，每次循环增加 1，直到 5。在每次循环中，我们使用 #{$i} 将变量插入到类名中，生成类似 .box-1、.box-2、.box-3、.box-4、.box-5 的样式代码。
在实际的开发中，我们可以使用 @for 循环语句来生成一些重复的样式代码，例如生成一组不同宽度的按钮：
$button-widths: 100px 150px 200px 250px 300px;
@for $i from 1 through length($button-widths) {
.button-#{$i} {
width: nth($button-widths, $i);
}
}上面的代码中，我们定义了一个 $button-widths 列表，其中包含了 5 个不同的宽度值。然后我们使用 @for 循环语句遍历这个列表，并为列表中的每个元素生成一个对应的类名和样式代码。这样就可以避免手动编写重复的代码，提高了开发效率。
@each 循环语句
@each 循环语句可以让我们遍历一个列表，并为列表中的每个元素生成样式代码。下面是一个简单的 @each 循环语句的示例：
$colors: red green blue;
@each $color in $colors {
.text-#{$color} {
color: $color;
}
}上面的代码中，$colors 是一个包含了 3 个颜色值的列表。我们使用 @each 循环语句遍历这个列表，并为列表中的每个元素生成一个对应的类名和样式代码。这样就可以快速地生成一组不同颜色的文本样式。
在实际的开发中，我们可以使用 @each 循环语句来遍历一些常用的样式值，例如字体大小、颜色、边框样式等等，然后为每个样式值生成一个对应的类名和样式代码。这样可以让我们的样式表更加简洁，易于维护。
总结
SASS 循环语句是一种非常实用的工具，可以帮助我们更高效地编写 CSS 样式。@for 循环语句可以让我们按照一定的规律重复生成样式代码，@each 循环语句可以让我们遍历一个列表，并为列表中的每个元素生成样式代码。在实际的开发中，我们可以使用循环语句来生成一些重复的样式代码，避免手动编写重复的代码，提高了开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65713143d2f5e1655d9e3694