最稳妥写法是外层@each断点、内层@for $i from 1 through $grid-max-columns并用12.0强制浮点，否则会漏列、归零或体积爆炸。
直接用 @for 循环生成 .col-1 到 .col-12 类最稳妥，但必须用 through、加 .0 强制浮点、外层 @each 断点——漏掉任一条件，编译出的类就可能宽度归零、漏列数或 CSS 体积爆炸。
为什么 @for $i from 1 to 12 会漏掉 .col-12
to 是开区间，@for $i from 1 to 12 只遍历 1 到 11；而主流栅格上限是 12 列，漏掉它会导致大屏容器无法铺满，DevTools 里查不到错误，只能肉眼比对布局。
- 必须写成
@for $i from 1 through 12，through是闭区间，确保终点包含在内 - 把列数抽成变量：
$grid-max-columns: 12 !default，后续升级到 24 列时只改这一处 - 别图省事写
to 13——语义混乱，团队协作时极易误判为“13 列系统”
percentage($i / 12) 会让所有列宽变成 0%
Sass 默认整数除法截断小数：1 / 12 直接得 0，percentage(0) 输出 0%，页面直接空白。
- 正确写法是
percentage($i / 12.0)，强制转为浮点运算 - 更健壮做法：提前定义
$col-unit: 100% / $grid-max-columns;，再用width: calc(#{$col-unit} * #{$i}); - 这样既避免重复计算，也方便后期切换单位（比如改成
rem或vw）
响应式断点嵌套时，@each 和 @for 顺序不能反
必须外层 @each $name, $width in $breakpoints，内层 @for $i from 1 through $grid-max-columns。反过来会导致每个列数都重复声明全部断点，CSS 体积暴增，且大量规则冗余无效。
- 断点
map必须是真实 map，如("sm": 640px, "md": 768px)，不能是 list，否则迭代顺序不可控 - 所有
@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 + 1 { .col-start-#{$i} { grid-column-start: #{$i}; } } - 别用
nth-child或 JS 思维去“动态算最大值”——Sass 编译期无 DOM，只能靠变量约定 - 如果项目用了
grid-template-areas，这类类名基本无效，得在文档里明确标注适用前提
真正麻烦的不是写对那行 @for，而是确保变量命名一致、断点 map 结构可靠、以及所有类都在同一作用域编译——Sass 不报错，但生成的 CSS 已经悄悄错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
