直接用 @for 写栅格类易产无效 CSS，因仅循环数字而未绑定列比（如 $i/12）和上下文约束（如 gutter、断点），导致错位；需用 @at-root 提升作用域、@each 驱动多断点、避免复杂函数调用。
为什么直接用 @for 写栅格类容易产出无效 CSS
常见错误是只循环数字，却没把列数映射到实际宽度计算逻辑上。比如写 @for $i from 1 through 12 后直接拼 .col-#{$i}，但没考虑容器总宽、gutter 占位、响应式断点——结果生成的类在页面里根本对不齐。
真正可用的栅格循环必须绑定两个东西：列数比例（如 $i / 12）和上下文约束（如最大列数、基础单位、是否含 gutter）。否则就是造了一堆看着整齐、用起来错位的“假类”。
实操建议：
- 先定义全局变量：
$grid-columns: 12、$grid-gutter: 1rem、$grid-unit: 1fr - 所有宽度计算统一用
calc((#{$i} / #{$grid-columns}) * 100% - #{$grid-gutter})这类表达式，避免整数百分比硬编码 - 如果项目用 Flexbox 布局，
flex属性比width更可靠，尤其在有gap时
如何让 @for 支持多断点 + 多行为（如 offset、push、pull）
单层 @for 只能扫一遍数字，但真实栅格需要为每个断点（sm、md、lg）都生成 col、offset、push 类。硬写三层嵌套会爆炸，正确做法是把断点和行为抽象成 map，再用 @each 驱动 @for。
立即学习“前端免费学习笔记（深入）”；
示例结构：
$breakpoints: (
sm: 576px,
md: 768px,
lg: 992px
);
<p>$behaviors: (
col: 'width',
offset: 'margin-left',
push: 'margin-left'
);</p><p>@each $name, $prop in $behaviors {
@each $bp-name, $bp-value in $breakpoints {
@media (min-width: $bp-value) {
@for $i from 1 through 12 {
.#{$bp-name}-#{$name}-#{$i} {</p><h1>{$prop}: calc((#{$i} / 12) * 100% - 1rem);</h1><pre class="brush:php;toolbar:false;"> }
}
}} }
注意：@for 必须放在 @media 内部，否则断点规则不会被包裹；calc() 中的减法项（如 - 1rem）要和实际 gutter 值一致，否则列间距会塌陷。
用 @at-root 解决嵌套污染问题
当在某个选择器内部写 @for（比如 .container { @for ... }），生成的类会变成 .container .md-col-3，完全失去全局性。这是初学者最高频的误用。
必须用 @at-root 把循环输出提回顶层 CSS 作用域：
.container {
// 其他样式
@at-root {
@for $i from 1 through 12 {
.col-#{$i} {
flex: 0 0 calc((#{$i} / 12) * 100%);
}
}
}
}否则所有类都会被挂载在 .container 下，无法用于任意容器——栅格系统就废了。
性能与维护陷阱：别在 @for 里调用复杂函数
Sass 编译时执行，@for 每次迭代都实时计算。如果在里面调用自定义函数（比如 grid-calc-width($i)），而该函数又含 @if 判断或 map 查找，编译速度会指数级下降，尤其列数超过 24 时。
更稳的做法是把计算逻辑外提，用纯算术表达式替代函数调用：
- ✅ 推荐：
width: calc((#{$i} / #{$grid-columns}) * 100%) - ❌ 避免：
width: grid-col-width($i)（除非函数极简且已 memoized） - 额外提醒：Sass 不支持运行时缓存，所以
@function调用不是零成本
真正难的从来不是写出循环，而是让生成的类在不同容器、不同断点、不同布局模式下都保持语义清晰、行为可预测——这要求你从第一行变量定义就开始想清楚约束条件，而不是等跑出一堆 .col-7 才发现它在 flex 容器里被截断了。
