什么是 @each 语句
@each 语句是 SASS 中用于遍历列表或映射的循环语句，语法格式为：
@each $var in <list> // 循环体
其中 $var 是循环变量名，<list> 是要循环遍历的列表或映射。
遍历列表时可以使用以下两种方式：
$list: 1 2 3;
@each $number in $list {
// 使用 $number 做循环操作
}或者：
@each $number in 1 2 3 {
// 使用 $number 做循环操作
}在 SASS 中，我们通常使用 @each 语句来遍历列表，然后对每一个元素做相同的操作或者根据元素的值做不同的操作。
下面是一个基本的示例，遍历一个颜色列表，并为每个颜色设置一个相同的背景颜色：
$colors: red, blue, green;
@each $color in $colors {
.color-#{$color} {
background-color: $color;
}
}在这个例子中，我们遍历了一个颜色列表，并为每个元素生成一条 CSS 规则，示例输出的 CSS 代码如下：
-- -------------------- ---- ------- ---------- - ----------------- ---- - ----------- - ----------------- ----- - ------------ - ----------------- ------ -
SASS 中如何使用 @each 语句遍历列表并做不同的操作
在实际开发中，我们通常需要根据列表中的元素值来做不同的操作，这时候我们可以使用 SASS 中的条件语句为每个元素设置不同的样式。
下面是一个示例，遍历一个列表，并根据每个值的奇偶性设置不同的背景颜色：
-- -------------------- ---- -------
-------- ---- ----- ------ ------- -------
----- ------ -- ------- -
------- -------------- --------
--- ------ - - -- - -
--------------------- -
----------------- -------
-
- ----- -
-------------------- -
----------------- -------
-
-
-在这个例子中，我们遍历了一个颜色列表，并根据每个元素的值来设置不同的样式，示例输出的 CSS 代码如下：
-- -------------------- ---- ------- --------------- - ----------------- ---- - --------------- - ----------------- ----- - ----------------- - ----------------- ------ - ----------------- - ----------------- ------- - ------------------ - ----------------- ------- -
总结
通过本文的介绍，我们了解了在 SASS 中如何使用 @each 语句遍历列表并做相应的操作，这为我们编写高效、简洁的 CSS 代码提供了便利。当然，在实际开发中，我们可以根据具体需求来灵活运用 SASS 中的循环语句和条件语句，以达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ffe4248841e9894f812b6