最可控的 grid-column 类生成方式是用 @for 配 unquote()，数值上限设为列数+1；span 失效因插值产生带引号字符串，须 unquote("span #{$i}")；start/end 值范围是 1 至 $cols+1，响应式类应按断点外层循环、列数内层循环，避免冗余；Grid 与浮动栅格变量需分离，gap 类宜用固定值而非数值循环。
直接用 @for 生成 grid-column 类最可控，但必须配 unquote()，且数值上限得设为列数 + 1；别用 percentage()，Grid 不吃百分比宽度。
为什么 grid-column: span #{$i} 会失效？
因为 span #{$i} 编译后是带引号的字符串 "span 3"，浏览器直接忽略该声明。Sass 插值不会自动剥离引号，grid-column 要的是关键字 + 数字的组合，不是字符串。
正确做法是用 unquote("span #{$i}") 强制转成无引号原始值：
@for $i from 1 through 12 {
.g-col-#{$i} {
grid-column: unquote("span #{$i}");
}
}
- 漏掉
unquote()是高频错误，DevTools 里看不到该样式，排查时容易卡在“类名写了但没生效” - 如果还要支持
start/end，比如.g-start-3，同样得用unquote("3")，不能写#{$i}直接拼 -
grid-column: #{$i} / #{$j}这种双值写法也得分别unquote()，否则任一端带引号就整个失效
@for $i from 1 through 12 为什么不够？
Grid 布局中，grid-column-start 合法值是 1 到 $cols + 1（例如 12 列系统中，start 最大可设为 13，表示跨到最后一条轨道线之后）。只遍历到 12 会漏掉关键位置。
- 错误写法：
@for $i from 1 through $grid-columns→ 漏掉.g-start-13 - 正确写法：
@for $i from 1 through $grid-columns + 1 - 若同时生成
span、start、end类，三者数值范围不同：span是1–$cols，start/end是1–$cols + 1，混用同一循环会出错
响应式 Grid 类怎么嵌套才不爆炸？
Grid 辅助类极少需要全断点覆盖（比如 .g-col-sm-3 实际使用率远低于 .col-sm-3 浮动类），硬套 @each 断点 + @for 列数会产出大量冗余 CSS。
- 优先策略：只对高频断点（如
md、lg）生成g-col-{bp}-n，移动端保持默认流式布局 - 若必须响应式，外层用
@each $name, $value in $breakpoints，内层@for $i from 1 through $grid-columns，顺序反了会导致每个$i都重复输出全部媒体查询 -
@media (min-width: #{$value})中的$value必须是纯数值（如768px），不能是字符串"768px"，否则编译报错
和传统浮动栅格共存时要注意什么？
项目里常同时存在 .col-6（float）和 .g-col-6（Grid），二者语义不同：前者是宽度百分比，后者是轨道跨度。不能靠同一套变量或循环复用逻辑。
- 别把
$grid-columns和$float-columns设成同一个变量——改 Grid 列数不该影响浮动栅格 - 命名必须区隔开，如
g-col-、g-row-、g-gap-，避免和 Bootstrap/Tailwind 的col-冲突 -
grid-gap类建议用固定值集合（如0.5rem、1rem、1.5rem）而非@for数值循环，Grid 间隙不需要“1 到 12”这种序列
真正麻烦的不是生成逻辑，而是当设计系统从 12 列切到 24 列时，grid-column-start 上限、span 范围、响应式类生成条件这三处必须同步更新，漏一个就会导致某类布局在特定断点下完全错位，且 DevTools 里看不出计算错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
