@for 循环生成列宽类必须用 through 而非 to，否则漏掉 .col-12 导致大屏塌陷；percentage() 计算需用 12.0 防整除归零；响应式类应外层 @each 断点、内层 @for 列数；grid-column-start 上限为 $grid-max-columns + 1。
@for 循环生成列宽类必须用 through，不能用 to
写 @for $i from 1 to 12 只会生成 .col-1 到 .col-11，漏掉关键的 .col-12 —— 这在 12 列栅格系统中直接导致大屏布局塌陷，且 DevTools 里查不到明显报错。真实项目里，12 是常用列数上限，不是可有可无的边界值。
正确写法是 @for $i from 1 through 12，语义清晰、结果确定；换成 to 13 虽然输出一样，但后续改成 24 列时容易误改错位置，所有主流框架（Bootstrap、Tailwind 源码）都统一用 through。
percentage() 计算列宽时必须加 .0 防整除截断
Sass 默认整数除法会向下取整：1 / 12 直接得 0，percentage(0) 输出就是 0%，所有列宽全归零。这不是 bug，是 Sass 的运算规则。
必须写成 percentage($i / 12.0) 强制浮点运算，才能得到 8.33333% 这样的正确值。更健壮的做法是提前定义：$col-unit: 100% / $grid-columns;，再用 width: calc(#{$col-unit} * #{$i});，避免重复计算和精度扰动。
响应式类要外层 @each 断点、内层 @for 列数
如果反过来（@for 包 @each），每个列数都会重复声明全部断点，CSS 体积暴涨，且大量类名冗余（比如 .col-sm-6 和 .col-lg-6 同时存在却只用一个）。
正确结构是：
- 外层
@each $name, $width in $breakpoints控制断点范围 - 内层
@for $i from 1 through $grid-columns生成该断点下的列类 - 每个断点只产出自己需要的类，如
sm下只出.col-sm-*，lg下才加.col-lg-* -
@media规则必须在同一个.scss文件里完成嵌套，跨文件引入断点 map 后再嵌套，@media会丢失包裹，输出裸规则
grid-column-start 类的数值边界容易超限失效
grid-column-start 合法值从 1 开始，上限是 $grid-max-columns + 1（因为可以跨到最后一条轨道线之后）。例如 12 列系统中，.col-start-13 是合法且常用（跨满 12 列），但写成 @for $i from 1 through $grid-max-columns 就漏掉了它。
超出这个范围不会报错，但布局完全错位，DevTools 里看不出异常——它只是默默把元素塞进隐式网格里，位置完全不可控。别试图用 nth-child() 或其他 JS 方式补救，这是纯 CSS 声明阶段的逻辑错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
