Sass中通过@for、@each和@while指令可循环生成CSS类。①@for用于生成编号类，如.col-1至.col-12，按比例设置宽度；②@each遍历列表或映射，适合生成颜色类如.text-primary，绑定名称与值；③@while在条件成立时持续生成类，如.item-1到.item-5，需手动更新变量防死循环。合理选用循环方式可减少重复代码，提升维护效率。
在Sass中，可以通过@for、@each和@while指令实现循环生成CSS类，这在需要批量创建具有规律命名或样式的类时非常实用。下面介绍几种常用方式。
当你需要生成一系列如 .col-1 到 .col-12 这样的类时，@for 是最合适的。
上面代码会生成从 .col-1 到 .col-12 的类，每个类的宽度按比例设置。其中 #{$i} 是Sass的插值语法，用于将变量插入选择器中。
如果要为一组颜色、尺寸或状态生成对应的类，@each 更加灵活。
立即学习“前端免费学习笔记（深入）”；
$colors: (primary: #007bff, success: #28a745, danger: #dc3545);@each $name, $color in $colors {
.text-#{$name} {
color: $color;
}
}
这段代码会生成 .text-primary、.text-success 和 .text-danger 类，并分别设置对应的颜色。适用于主题色、状态类等场景。
@while 适合在满足某个条件时持续生成类，虽然使用频率较低，但也有其用途。
该示例生成 .item-1 到 .item-5，每个类的左边距递增。注意手动更新变量值以避免死循环。
基本上就这些。合理使用Sass循环能大幅减少重复代码，提升维护效率。关键是根据数据结构选择合适的循环方式：固定范围用 @for，键值对用 @each，条件控制用 @while。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
510
收藏
