SCSS的@for循环变量是编译时只读迭代器，不可赋值修改；through包含终点而to不包含；需用表达式实现累加效果，避免大范围无效循环。
@for 循环里的变量不是“自增变量”，它只是每次迭代时被赋予一个新值的只读迭代器 —— 你不能在循环体里写 $i: $i + 1，也不能用它做运行时累加。所谓“自增变量无效”，本质是误解了 @for 的设计意图。
为什么 $i++ 或 $i: $i + 1 在 @for 里报错？
SCSS 编译期不支持运行时变量重赋值（尤其在控制指令内部）。@for 的 $i 是编译时绑定的局部符号，仅用于接收当前轮次的整数值。
-
@for $i from 1 through 5 { $i: $i + 1; }→ 编译失败，提示 “Invalid CSS” 或 “Variable$iis not assignable” - 哪怕只写
$i: 999，也会触发同类型错误 - 这不是 bug，是语言限制：SassScript 不允许在
@for、@each等指令块内修改迭代变量
through 和 to 的边界差异直接影响结果数量
混淆这两个关键字，会导致生成类名或样式数量比预期少 1 个（或多个），看起来像“漏掉最后一项”。
-
@for $i from 1 to 5→ 实际执行 4 次：$i取值为1, 2, 3, 4 -
@for $i from 1 through 5→ 执行 5 次：$i取值为1, 2, 3, 4, 5 - 生成响应式断点、间距工具类时，用错会直接导致
.m-5或.max-w-1200缺失 - 没有运行时调试能力，只能靠手动算范围或编译后检查 CSS 输出行数来验证
需要“累加效果”时，别硬改 $i，改用计算表达式
真正需要的是基于轮次的派生值（比如每轮加 4px、宽度翻倍、颜色索引取模），这些全靠表达式完成，而非修改 $i 本身。
立即学习“前端免费学习笔记（深入）”；
- 递增间距：
margin: $i * 4px，不是$i: $i + 4 - 颜色循环：
nth($colors, (($i - 1) % length($colors)) + 1)，避免越界 - 生成
z-index序列：z-index: $i * 10（10, 20, 30...） - 注意：所有运算必须在编译期可求值，不能含函数调用（如
random()在某些构建环境会被禁用）
大范围循环（如 through 200）容易拖慢编译且无实际价值
生成 200 个 .w-1 到 .w-200 类看似全面，但项目中几乎不会用到全部，反而带来三重负担：
- SCSS 编译时间明显变长，尤其在 watch 模式下感知强烈
- CSS 文件体积膨胀，gzip 后仍可能多出 10–30 KB
- 开发者面对类名列表失去语义感，
.w-137比.w-full更难维护 - 建议收敛范围：间距用
1–24，尺寸用1–96（对应 Tailwind 默认标尺），并配合@if过滤条件（如跳过非 4 倍数）
真正卡住人的，从来不是语法记不住，而是把 @for 当成 JS for (let i = 0; i < n; i++) 来用 —— 它没有“状态”，只有“当前值”。只要接受这个前提，所有“无效”问题就自然消失了。
