必须用 through 而非 to，否则漏掉 .col-12；percentage 计算需加 .0 防整除归零；@for 必须嵌套在 @each 断点内并用 @at-root 提升作用域，确保响应式栅格正确生成。
@for 必须用 through 而非 to，否则漏掉关键列类
写 @for $i from 1 to 12 只生成 .col-1 到 .col-11，.col-12 永远不会出现——而 12 列是多数布局的满宽基准，漏掉它会导致大屏下内容塌陷，且 DevTools 里看不出异常。
正确写法是 @for $i from 1 through 12，闭区间保证终点值参与编译。若后续要切到 24 列，只需改变量，不用重审循环逻辑。
- 别用
to 13临时补救：语义错乱，维护时极易误判基数 - 所有主流框架（Bootstrap、Tailwind 源码）均采用
through，这是编译期确定性的基本要求 - 列数范围必须对齐设计系统，比如只支持 1–12，就别循环到 16
percentage($i / 12.0) 里那个 .0 不是可选，是必须
Sass 整数除法默认截断小数：1 / 12 得 0，percentage(0) 输出 0%——所有列宽全归零，页面空白。
加 .0 强制浮点运算：percentage($i / 12.0) 才能输出 8.33333% 这类有效值。更健壮的做法是提前算好单位：$col-unit: 100% / $grid-columns;，再用 calc(#{$col-unit} * #{$i})，避免重复计算和精度丢失。
- 不要依赖浏览器四舍五入：
calc(100% / 7)在不同引擎下可能有 0.1px 偏差 - 若用了
gap，记得从总宽里减去 gutter 占位，否则列间距会塌陷 - Flexbox 下优先用
flex属性而非width，尤其在有gap时更可靠
@each 断点必须包 @for，不能反过来
外层 @for 包 @each 会导致每个列数都重复声明全部断点，12 列 × 5 断点 = 60 条规则，其中大量冗余（比如 .col-md-6 和 .col-lg-6 宽度相同时仍重复输出）。
正确结构是外层 @each $bp-name, $bp-value in $breakpoints，内层 @for $i from 1 through 12，且 @for 必须放在 @media (min-width: $bp-value) 内部，否则断点规则不会被包裹，最终输出裸 CSS 类名，响应式直接失效。
- 断点必须定义为 map：
$breakpoints: ("sm": 576px, "md": 768px, "lg": 992px)，不能硬写@media (min-width: 768px) - 如果某断点下无需响应式列（如移动端强制单列），跳过该
@each分支，别硬塞空@media - 所有断点变量和循环逻辑必须放在同一个
.scss文件中，@use后跨文件嵌套@media会丢失包裹
@at-root 是防止嵌套污染的唯一解
在某个选择器内部写 @for（比如 .container { @for ... }），生成的类会变成 .container .md-col-3，完全失去全局性，无法被 HTML 直接调用。
必须用 @at-root 把循环输出提回顶层 CSS 作用域：@at-root { .#{$bp-name}-col-#{$i} { ... } }。这是初学者最高频的误用，也是栅格类“写出来却不起作用”的最常见原因。
-
@at-root不解决计算逻辑问题，只解决作用域污染；宽度计算错误仍需单独排查 - 若项目需要
offset、push等行为，复用同一@for变量即可，数值范围通常与列数一致 - 别试图用
nth-child或 JS 思维动态推导——Sass 编译期无 DOM，只能靠变量约定
真正可用的栅格循环，从来不是“把数字塞进类名”，而是把列数比例（$i / $grid-columns）和上下文约束（断点、gutter、布局模式）绑死在每次计算里。漏掉任意一环，产出的就是一堆看着整齐、用起来错位的“假类”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
