SASS (Syntactically Awesome Style Sheets) 是一种 CSS 预处理器，它可以让我们写出更加优雅和模块化的样式。其中 in 语句是 SASS 中非常强大和灵活的一种语句，利用它我们可以更加方便地处理样式中的重复和逻辑。
in 语句是什么？
in 语句被称为 Sass 中的 @each 语句的一种缩写形式。它的作用是对一个列表进行迭代，并在每次迭代中生成新的 CSS 规则。语法如下：
----- --------- -- ----- - -- ---- -
其中，$variable 表示当前迭代的变量名，$list 是一个列表。在每次迭代中，$variable 会被依次赋值为 $list 中的每一个值，然后再按照设定的格式输出代码。
in 语句的使用技巧
处理重复样式
在实际项目中，我们经常会遇到一些需要大量重复样式的情况，比如每个按钮的样式都是相同的但文字和颜色不同。这时候就可以利用 in 语句来简化代码：
-------- -------- -------- --------
----- ------ -- ------- -
-------------- -
----------------- -------
-
-上面的代码中，我们定义了一个 $colors 列表，然后利用 in 语句对它进行迭代。在每次迭代中，将当前颜色值通过 #{$color} 插值到 .btn- 类名中，然后输出该颜色的背景色样式。这样就能够快速生成多个以不同颜色为背景的按钮样式。
处理多维列表
有时候我们可能会遇到一个多维列表的数据结构，比如一个二维数组。这时候也可以利用 in 语句对它进行迭代：
-------- -- - -- - - -- - - ---
----- ---- -- ------- -
----------- -------------- ------
----- ---- -- ---- -
----------- ----------- ------
--------------------------------- -
------ ----------
-
-
-上面的代码中，我们定义了一个二维列表 $matrix，然后利用 in 语句对它进行两层迭代。在外层循环中，我们取出每一行，并通过 index($matrix, $row) 获取它在 $matrix 中的行索引。在内层循环中，我们取出每一列，并通过 index($row, $col) 获取它在该行中的列索引。最终生成类似 .cell-1-1、.cell-1-2、.cell-2-1 的单元格样式。
处理 Map
除了列表之外，in 语句还支持对 Map 进行迭代。这时候 $variable 就表示 Map 中的键名，而不是值。
-------- -
-------- --------
---------- --------
-------- --------
------- --------
-------- --------
----- --------
--
----- ------ ------ -- ------- -
-------------- -
------ -------
-
-上面的代码中，我们定义了一个颜色表 Map，然后利用 in 语句对它进行迭代。在每次迭代中，将当前颜色的键名插值到 .text- 类名中，然后输出该颜色的文本颜色样式。
总结
in 语句是 SASS 中非常强大和灵活的一种语句，可以帮助我们更加方便地处理样式中的重复和逻辑。同时也提醒大家在使用 in 语句时要注意数据格式的准确性，以免出现语法错误。希望这篇文章能够帮助大家更好地理解 in 语句及其使用技巧。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6503feb595b1f8cacd0bc9e9