使用@for、@each和@while可批量生成CSS类;@for按数字范围生成如.margin-1到.margin-10;@each遍历颜色映射生成.text-success等类;@while通过条件控制循环生成间距类。

在 Sass 中,可以通过 @for、@each 和 @while 循环来批量生成类样式,特别适合用于创建具有规律命名的 CSS 类,比如栅格系统、间距工具类等。
使用 @for 生成数字类名
当你需要根据数字范围生成类名时,@for 是最常用的方式。例如,生成从 .margin-1 到 .margin-10 的类:
@for $i from 1 through 10 { .margin-#{$i} { margin: #{$i * 4}px; } }编译后会生成类似:
.margin-1 { margin: 4px; } .margin-2 { margin: 8px; } /* ... */ .margin-10 { margin: 40px; }使用 @each 遍历列表或映射
如果你有一组固定的值或键值对,@each 更合适。例如,为不同的颜色生成文本类:
立即学习“前端免费学习笔记(深入)”;
@each $name, $color in $colors { .text-#{$name} { color: $color; } }
这将生成 .text-success、.text-error 等类。
使用 @while 的条件循环
@while 会在条件为真时持续执行,适用于更灵活的控制逻辑。例如:
$i: 1; @while $i生成 .padding-1 到 .padding-5,每个类 padding 递增 8px。
基本上就这些。Sass 的循环能极大提升样式开发效率,尤其在构建设计系统或工具类 CSS 时非常实用。注意避免生成过多无用类,影响打包体积。










