直接写 .col-1 到 .col-12 比手写 CSS 更可靠，因 Sass 的 @for 能确保数值连续、单位统一、逻辑固化，改栅格基数只需调一个变量；用 through 避免漏类，用 unquote() 处理 grid-column，且应限制循环范围防体积暴增。
为什么直接写 .col-1 到 .col-12 比手写 CSS 更可靠
手动维护 12 个类名的宽度规则，容易漏改、错值、单位不一致；而 Sass 的 @for 能确保数值连续、单位统一、无重复。更重要的是，它把“列数→宽度”的映射逻辑显式固化下来，后续改栅格基数（比如从 12 切到 24）只需调一个变量，不用逐个算百分比。
常见错误是写成 @for $i from 1 to 12，结果漏掉 .col-12 —— 正确写法必须用 through：
@for $i from 1 through 12 {
.col-#{$i} {
width: percentage($i / 12);
}
}注意：percentage() 是 Sass 内置函数，返回带 % 单位的字符串，无需拼接；若用 calc(#{$i} / 12 * 100%) 反而引入运行时计算，失去静态编译优势。
@for 生成响应式断点类时，如何避免选择器爆炸
想给每个断点（sm、md、lg）都配一套 .col-sm-1….col-lg-12？直接三层嵌套会生成 3×12=36 个类——但真正被用到的可能不到 1/5。更务实的做法是只生成高频组合：
立即学习“前端免费学习笔记（深入）”；
- 用
$breakpointsmap 存断点值，@each遍历比@for更语义清晰 - 对每个断点，只生成
1、2、3、4、6、12这几个常用列宽，跳过5、7等奇数 - 用
@if $i == 12 or $i % 3 == 0 or $i 控制生成范围，而非硬写 <code>through 12
否则，未使用的 .col-md-7 会留在 CSS 里，增加体积且干扰 DevTools 查找。
用 @for 生成 grid-column 而非 width 时要注意什么
Flex/Grid 布局下，.col-3 不再代表“占 25% 宽度”，而是“占 3 栅格线”，此时 grid-column: span 3 才是正解。但 @for 循环里不能直接写 span #{$i} —— 因为 span 是关键字，Sass 不会把它当字符串插值。
正确写法是用引号包裹后 unquote()：
@for $i from 1 through 12 {
.g-col-#{$i} {
grid-column: unquote("span #{$i}");
}
}漏掉 unquote() 会导致编译出 grid-column: "span 3"（带引号的字符串），浏览器直接忽略该声明。另外，grid-column 不支持百分比值，所以别在 Grid 场景里混用 percentage()。
Sass 编译后 CSS 体积暴增？检查 @for 是否被滥用
有人用 @for $i from 1 through 100 生成图标类名或 z-index 层级，结果产出几百行无用 CSS。列表布局场景中，真正的约束是设计系统定义的列数上限（通常是 12 或 24），超出这个数的类名既不会被 HTML 引用，也无法被浏览器优化。
判断是否滥用的关键信号：
- CSS 文件里出现
.col-13、.col-17等明显越界类名 - DevTools 中这些类名从没被激活过（始终灰色）
- 构建后 CSS gzip 前体积比手写版大 2 倍以上
网格宽度生成这件事，12 就是硬边界。多一行 @for 循环，就多一分维护负担和加载成本。
