<p>@while 容易导致死循环或错序 CSS，因其依赖手动更新变量且无 break 机制，漏写 $i: $i - 1 或条件错误即触发栈溢出。</p>
SCSS @while 指令能生成复杂序列，但实际中几乎没人用它
因为 @while 在 SCSS 中是「语法存在但工程价值极低」的指令：它不支持作用域隔离、无法提前退出（没有 break）、变量不可变（$i: $i + 1 是合法的，但容易误以为是 JS 风格），且生成逻辑稍一复杂就难维护。真正需要循环生成 CSS 类时，@for 更直接、可读、可控。
为什么 @while 容易写出死循环或错序 CSS
SCSS 的变量是「块级作用域 + 一次性赋值」，@while 循环体里必须显式更新变量，漏写或写错条件就会卡住编译（Node Sass 报 Maximum call stack size exceeded，Dart Sass 报 Stack overflow）。
常见错误现象：
$i: 1; @while $i —— 缺少 <code>$i: $i + 1;，无限循环$i: 0; @while $i —— 输出 <code>.step-0到.step-3，但人眼预期常从 1 开始，语义错位- 嵌套
@while时变量名冲突，内层改写外层变量，结果完全不可预测
真要用 @while 生成递增序列？只推荐这个最小安全模式
确保三点：变量初始化明确、条件边界严格、更新语句紧贴结尾。以下是一个生成 .col-span-1 到 .col-span-12 的可靠写法：
立即学习“前端免费学习笔记（深入）”；
$i: 1;
@while $i <= 12 {
.col-span-#{$i} {
grid-column: span $i;
}
$i: $i + 1; // 必须放在块末尾，且不能缩进到其他规则内部
}使用场景有限：仅适用于纯数值递增、无分支逻辑、无依赖计算的线性序列。一旦涉及 if 分支、步长变化（如 ×2）、或需反向生成（12 → 1），立刻换 @for。
@for 是更稳妥的替代方案，兼容所有主流 SCSS 解析器
Dart Sass、Node Sass、LibSass 全支持 @for，且语义清晰、不易出错。等效生成上面的栅格类只需：
@for $i from 1 through 12 {
.col-span-#{$i} {
grid-column: span $i;
}
}优势明显：
-
through包含边界，to不包含，语义比/ <code> 更直观 - 无需手动管理计数器变量，不会漏更新
- 支持负步长（
@for $i from 12 to 0 by -1），@while做不到 - 与
@if组合自然，比如跳过某些值：@if $i != 5 { ... }
真正复杂的序列（如响应式断点叠加、BEM 多层修饰符组合）应该用 @each 配合 map，而不是硬啃 @while。
记住：SCSS 编译期循环不是编程语言循环，它的唯一目的是生成确定、扁平、可预测的 CSS 规则。越想“灵活”，越容易掉进变量作用域和求值时机的坑里。
