前言
SASS 是一种基于 CSS 的预处理器，通过 SASS 可以更加便捷地编写 CSS 样式。在 SASS 中，可以采用循环语句对重复的代码进行简化和优化，从而提高开发效率和样式的可维护性。
本文将介绍 SASS 中常见的循环处理方法及其使用技巧，包括 for、each 等语句，详细讲解它们的使用场景、语法和示例代码，并给出一些实用的开发技巧和指导意义。
for 循环
在 SASS 中，for 循环用于执行一定次数的循环，通常用于在样式表中生成带有变化的代码块。
语法
@for $i from <start> through <end> {
// 循环内需要执行的代码
}其中，$i 是循环计数器，<start> 和 <end> 是循环的起始值和结束值。循环可以包含任意的 Sass 代码。
示例
在样式表中生成带有变化的代码块
-- -------------------- ---- -------
-- -- -- ---------
---- -- ---- - ------- -- -
------------ -
----------------- ------------ --- - ---- -- ------
------- -----
------ -----
------ -----
-
-技巧
如果想从大到小循环，可以采用
@for $i from <end> through <start>的写法。如果不需要使用循环计数器，可以用
_代替$i，例如：@for _ from 1 through 10。通过计算，还可以实现复杂的循环变化效果，如层叠渐变色块、斜线条纹等。
each 循环
在 SASS 中，each 循环用于对列表或映射中的值进行遍历，通常用于对一组相似的样式进行分析和处理。
语法
@each $var in <list> {
// 循环内需要执行的代码
}其中，$var 为列表或映射中的每个元素，在循环内为变量。<list> 可以是一个列表（用逗号分隔的多个值）或映射（key 和 value 用冒号分隔）。
示例
处理包含多个前缀的样式
-- -------------------- ---- -------
---------- ------------ -------- ------ ----
------ ---------------------- -
----- ------- -- --------- -
------------------------ --------
-
-------------- --------
-
------- -
-------- -------------------
-技巧
在循环内可以对元素进行操作，例如对列表求和、查找列表中的最大值、计算平均值等。
如果需要同时遍历多个列表或映射，可以使用嵌套循环来实现（类似于嵌套 for 循环）。
通过将列表或映射存储在变量中，还可以方便地复用和修改。
总结
SASS 中的循环语句可以有效提高样式表的编写效率和可维护性，也能实现一些复杂的变化效果。在实际开发中，可以根据不同的情况选择合适的循环方法，并结合其他 SASS 特性（如混合、函数、变量等）进行综合使用。希望本文能为广大前端开发者引入 SASS 循环处理方法提供一些帮助和启示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6520f6f095b1f8cacd868bc7