必须用 @for $i from 1 through $n 而不是 to，因 to 是开区间会漏掉终点值（如 .grid-cols-12），导致大屏无法铺满；through 为闭区间确保包含终点，配合 $grid-max-columns 变量统一管理列数上限。
直接用 @for 循环生成类是最可靠的方式，其他方案（比如纯 CSS repeat() 或 JS 动态插入）要么无法产出语义化类名，要么破坏编译期可控性。
为什么必须用 @for $i from 1 through $n 而不是 to
to 是开区间，@for $i from 1 to 12 只会生成 .grid-cols-1 到 .grid-cols-11，漏掉关键的 .grid-cols-12。而 12 列是主流栅格上限，漏掉它会导致大屏容器无法铺满，且 DevTools 中无报错提示，只能肉眼排查。
- 用
through才是闭区间，确保终点值被包含 - 把列数抽成变量
$grid-max-columns: 12 !default，后续升级到 24 列时，只需改一处，不用动循环逻辑 - 别写
to 13图“结果一样”——语义混乱，团队协作时极易误判
percentage() 计算列宽时为何要加 .0
Sass 默认整数除法会截断小数：1 / 12 直接得 0，percentage(0) 输出 0%，所有列宽全归零，页面空白。
- 正确写法是
percentage($i / 12.0)，强制浮点运算 - 更健壮的做法是提前定义
$col-unit: 100% / $grid-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，这类类名基本无效，得在文档里明确标注适用前提
真正麻烦的不是写对一次循环，而是当设计系统从 12 列升级到 24 列时，所有 $grid-max-columns、percentage 分母、grid-column-start 上限、断点内循环范围都得同步更新——漏掉任意一个，就会在某个断点或某个列数上静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
