SASS 中使用循环语句生成特定的样式规则
SASS（Syntactically Awesome Style Sheets）是一个非常流行的 CSS 预处理器，它允许前端开发者在编写 CSS 时更快、更方便、更具表现力。SASS 提供了许多有用的功能，包括嵌套、变量、mixin、函数等等。其中，循环语句是一项非常有用的功能，它可以帮助我们生成特定的样式规则，让我们更加高效地编写样式。
SASS 循环语句介绍
SASS 提供了两种类型的循环语句：
@for循环：用于执行一定次数的代码块。@each循环：用于在给定的列表中迭代执行代码块。
下面我们分别介绍一下这两种循环语句的使用方法。
@for 循环
@for 循环语句用于执行一定次数的代码块，我们可以使用它来生成连续的样式规则。下面是一个简单的例子：
@for $i from 1 through 3 {
.item-#{$i} {
width: 100px * $i;
}
}在上面的代码中，我们使用了 @for 循环语句，从 1 到 3 执行了一遍代码块。每次循环中，我们生成了一个名为 .item-1、.item-2 或 .item-3 的 CSS 类，它们分别具有 width 属性为 100px、200px 或 300px 的样式规则。
除了通过变量来生成样式外，我们也可以使用列表来生成样式，如下面的例子所示：
$num-list: 10 20 30;
@for $i from 1 through length($num-list) {
.box:nth-child(#{$i}) {
width: nth($num-list, $i) * 1px;
}
}在上面的代码中，我们使用 $num-list 列表来生成样式规则。每次循环中，我们生成了一个名为 .box:nth-child(1)、.box:nth-child(2) 或 .box:nth-child(3) 的 CSS 类，它们分别具有 width 属性为 10px、20px 或 30px 的样式规则。
在 @for 循环中，我们也可以使用关键字 through 或 to。 through 表示从起始到终止值都包含，而 to 表示只包含起始值到终止值之前的值。例如：
@for $i from 1 to 4 {
// ...
}@each 循环
@each 循环语句用于在给定的列表中迭代执行代码块，我们可以使用它来生成一系列相关的选择器或样式规则。下面是一个简单的例子：
$colors: red, blue, green;
@each $color in $colors {
.background-#{$color} {
background-color: $color;
}
}在上面的代码中，我们使用 @each 循环语句，迭代了名为 $colors 的列表中的每个元素。每次循环中，我们生成了一个名为 .background-red、.background-blue 或 .background-green 的 CSS 类，它们分别具有 background-color 属性为红色、蓝色或绿色的样式规则。
除了迭代列表外，我们还可以使用 @each 循环语句生成一系列相关的选择器，如下面的例子所示：
-- -------------------- ---- -------
------- ---- ------- -------
----- ----- -- ------ -
-------- -
---------- -----
-
-------- - -
------ -----
-
-在上面的代码中，我们使用 @each 循环语句，迭代了名为 $items 的列表中的每个元素。每次循环中，我们生成了一个与 $item 同名的选择器和一个后代选择器，它们分别具有 font-size 属性和 color 属性的样式规则。
循环语句的嵌套使用
在 SASS 中，我们可以将循环语句嵌套在一起使用，来生成更加复杂的样式规则。例如，下面的代码使用了 @for 循环嵌套 @each 循环，生成一系列带有不同背景色和宽度的元素：
-- -------------------- ---- -------
-------- ---- ------- ------
-------- ------ ------ ------
---- -- ---- - ------- --------------- -
----- ------ -- ------- -
-------------------- -
----------------- ------------ ----
------ -------
-
-
-在上面的代码中，我们使用了 @for 循环嵌套 @each 循环，生成了一系列 CSS 类名为 .box-1-100px、.box-1-200px、.box-1-300px、.box-2-100px、.box-2-200px、.box-2-300px、.box-3-100px、.box-3-200px 和 .box-3-300px 的元素。这些元素具有不同的背景色和宽度，可以用来实现复杂的布局。
总结
通过使用 SASS 中的循环语句，我们可以快速生成一系列相关的选择器或样式规则，提高样式的复用性和维护性。在使用循环语句时，需要注意不要过度使用嵌套，避免代码过于复杂。通过合理利用循环语句，我们可以让样式编写更加高效、更加方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6522850195b1f8cacda0292f