Sass循环生成类样式技巧

本文深入介绍了 Sass 中三大循环指令（@for、@each、@while）在批量生成 CSS 工具类中的高效应用：@for 适用于数字序列类如 .margin-1 到 .margin-10；@each 精准遍历颜色映射等键值对，快速产出 .text-success 等语义化类；@while 则通过动态条件灵活控制生成范围，如递增间距类。这些方法不仅显著提升样式开发效率，更是构建可维护设计系统和原子化 CSS 的核心技巧——让你用几行代码替代上百行重复样式，同时兼顾性能与可读性。

在 Sass 中，可以通过 @for、@each 和 @while 循环来批量生成类样式，特别适合用于创建具有规律命名的 CSS 类，比如栅格系统、间距工具类等。

使用 @for 生成数字类名

当你需要根据数字范围生成类名时，@for 是最常用的方式。例如，生成从 .margin-1 到 .margin-10 的类：

编译后会生成类似：

使用 @each 遍历列表或映射

如果你有一组固定的值或键值对，@each 更合适。例如，为不同的颜色生成文本类：

这将生成 .text-success、.text-error 等类。

使用 @while 的条件循环

@while 会在条件为真时持续执行，适用于更灵活的控制逻辑。例如：