必须用through而非to，因to是开区间会漏掉.col-12；percentage计算需加.0避免整数除法归零；响应式须外层@each、内层@for；grid-column-start上限应为$grid-max-columns+1。
直接用 @for $i from 1 through 12 生成 .col-1 到 .col-12 是最稳妥的做法，through 确保终点包含，1 起始排除无意义的 .col-0，且所有宽度计算必须用 percentage($i / 12.0) 防整除归零。
为什么必须用 through 而不是 to
@for $i from 1 to 12 只生成 .col-1 到 .col-11，漏掉关键的 .col-12。12 列是主流栅格上限，漏掉它会导致大屏容器无法铺满，而 DevTools 不报错、不警告，只能靠肉眼比对布局。
-
through是闭区间，语义明确：写1 through 12就真输出 12 个类 - 若改列数上限为 24，只需调
$grid-max-columns: 24，循环体不用动 - 有人写
to 13图“结果一样”，但一旦换成变量to $cols + 1，极易和through $cols混淆，协作时出错率高
percentage($i / 12) 为什么必须加 .0
Sass 默认执行整数除法：1 / 12 得 0，percentage(0) 输出 0%——所有列宽全归零，页面内容塌陷，控制台无提示，极难定位。
- 正确写法：
percentage($i / 12.0)→.col-1 { flex: 0 0 8.33333%; } - 更健壮做法：提前定义
$col-unit: 100% / $grid-max-columns;，再用width: calc(#{$col-unit} * #{$i});，避免重复计算与精度丢失 - 别混用
percentage()（编译期）和calc()（运行时），前者才是 Sass 的优势所在
如何安全插值进类名而不触发类型警告
如果用 @each 遍历 map 生成列类，键必须是带引号字符串（如 "1"），否则 #{$key} 插值会失败或报 Sass 类型警告——因为数字键在 @each 中被识别为 number 类型，不能直接拼进类名。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
$grid-columns: (1: 8.333%, 2: 16.667%)→.col-#{$key}编译失败 - 正确写法：
$grid-columns: ("1": 8.333%, "2": 16.667%)→ 插值成功 - 不要混用键类型：
("1": ..., 2: ...)会导致部分项被跳过，Sass 对键类型敏感
响应式嵌套时，@each 和 @for 谁包谁
外层必须是 @each $breakpoint, $query in $breakpoints，内层是 @for $i from 1 through $grid-max-columns，且 @media 必须紧贴断点循环体内。
- 反着来（
@for包@each）会导致每个列数都重复声明全部断点，12 × 5 = 60 条规则，大量冗余 - 断点 map 的 key 必须是无引号标识符（如
sm），否则生成."sm":col-6这类非法语法 -
@media块必须在同一个.scss文件中完成嵌套，跨文件@use后再嵌套会丢失包裹，输出裸类名
真正卡住人的地方，往往不是“怎么写”，而是改了 $grid-max-columns 却忘了同步更新 grid-column-start 类的上限（应为 $grid-max-columns + 1），或在断点 map 里误用了带引号的 key。这些点不出错则已，一错就是静默失效。
