@for 生成网格类最稳妥，必须用 through 而非 to 以包含终点值；percentage 计算需加 .0 防整除截断；响应式应外层 @each 断点、内层 @for 列数；grid-column-start 上限为 $grid-max-columns + 1；列数变更时须同步更新所有相关变量。
直接用 @for 生成网格类是最稳妥、最可控的方式；纯 CSS 的 repeat() 只能定义运行时轨道，没法产出带语义、断点、修饰符的类名，更不能自动适配列数变更。
为什么 @for $i from 1 through 12 必须用 through 而不是 to
因为 to 不包含终点值，@for $i from 1 to 12 只会生成 .col-1 到 .col-11，漏掉关键的 .col-12。而真实栅格系统中，12 列是常用上限，漏掉它会导致大屏布局失效且极难定位。
-
through是闭区间：含起点和终点，写1 through 12就真生成 12 个类 - 手写
to 13虽然结果一样，但语义错乱，后续改基数（比如切到 24 列）时极易出错 - 所有主流框架（Bootstrap、Tailwind 源码）都用
through，这是约定而非偏好
percentage($i / 12.0) 里为什么必须加 .0
Sass 默认整数除法会截断小数，1 / 12 直接得 0，percentage(0) 输出就是 0%——所有列宽全崩。加 .0 强制转为浮点运算，才能得到正确百分比。
- 错误写法：
percentage($i / 12)→.col-1 { width: 0%; } - 正确写法：
percentage($i / 12.0)→.col-1 { width: 8.33333%; } - 更健壮的做法是提前算好：
$col-unit: 100% / $grid-columns;，再用calc(#{$col-unit} * #{$i})，避免重复计算
响应式断点嵌套时，@each 包 @for 还是反过来
必须外层 @each $name, $width in $breakpoints，内层 @for $i from 1 through 12。反着来（@for 包 @each）会导致每个列数都重复声明全部断点，CSS 体积暴增且大量冗余。
- 正确结构：每个断点只生成自己需要的类，比如
sm下只覆盖.col-sm-6，lg下才加.col-lg-8 - 注意：
@media规则必须在同一个.scss文件里完成编译，跨文件引入断点 map 后再嵌套，@media会丢失包裹，最终输出裸规则 - 如果某断点下无需响应式列（如移动端强制单列），跳过该
@each分支，别硬塞空@media
grid-column-start 类的数值边界怎么设才安全
grid-column-start 最小值是 1，最大值是 $grid-max-columns + 1（因为可跨到最后一个轨道线之后）。超出这个范围不会报错，但布局完全失效，且 DevTools 里看不出异常。
- 错误做法：用
@for $i from 1 through $grid-max-columns→ 漏掉.col-start-13（12 列系统中合法） - 正确做法：
@for $i from 1 through $grid-max-columns + 1 - 别试图用
nth-child或 JS 思维动态推导——Sass 编译期无 DOM，只能靠变量约定 - 若项目用了
grid-template-areas，这类类名基本无效，需在文档里明确标注适用前提
真正麻烦的不是写对一次循环，而是当设计系统从 12 列升级到 24 列时，所有 $grid-max-columns、percentage 分母、grid-column-start 上限、断点内循环范围……必须同步更新，漏一个就埋雷。把变量提取到顶层配置文件，并加注释说明影响范围，比省几行代码重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
