用 @for 生成网格轨道定义最直接，需拼接字符串后用 unquote() 包裹进 grid-template-columns；避免在子元素上循环 grid-area，应聚焦容器层轨道结构；响应式需嵌套 @each 断点映射；生成类须配业务注释。
用 @for 生成重复的网格轨道定义最直接
如果你要写 grid-template-columns: repeat(12, 1fr) 这类固定列数的布局，手动敲数字容易错、改起来也费劲。Sass 的 @for 能帮你把列声明变成可读、可调的逻辑——但注意：@for 本身不能直接输出 CSS 的 repeat() 函数，它只能拼字符串或生成多个规则。真正省事的做法是用它批量生成带索引的类名或轨道声明。
常见错误是试图让 @for $i from 1 through 12 直接输出 grid-column: #{$i}，结果得到 12 条孤立的 grid-column 声明，毫无意义。你要的是控制容器的轨道结构，不是给每个子项硬编码位置。
- 适用场景：需要生成多套预设列数（如
.grid-cols-4、.grid-cols-6）或响应式断点下的不同grid-template-columns - 关键点：用
@for拼接字符串后，必须用unquote()或插值包裹进grid-template-columns值里，否则 Sass 会加引号导致 CSS 解析失败 - 示例（生成 2–12 列工具类）：
@for $i from 2 through 12 { .grid-cols-#{$i} { grid-template-columns: unquote("repeat(#{$i}, minmax(0, 1fr))"); } }
避免 @for 和 grid-area 混用导致命名冲突
有人想用 @for 自动生成 grid-area: "a1"; grid-area: "a2"; 这类声明，这几乎没用——grid-area 是作用在子元素上的，而网格区域名（如 "header"）必须和容器的 grid-template-areas 严格对应。循环生成一堆无关联的名字，反而让布局失去语义和可维护性。
真正该自动化的是容器层的命名区域模板，比如按行/列数动态构造 grid-template-areas 字符串。但这对多数项目过重，不如手写几组常用布局（"header header" "nav main" "footer footer"）更可控。
立即学习“前端免费学习笔记（深入）”；
- 容易踩的坑：在子元素上循环生成
grid-area，却没同步生成容器的grid-template-areas，CSS 完全不生效 - 性能影响：
@for在编译期运行，不影响运行时，但生成大量冗余类（如 100+ 个.col-span-1到.col-span-12）会增大 CSS 体积 - 更稳妥的替代：用
grid-column: span #{$i}配合基础类（如.col-span-3），比动态区域名实用得多
响应式网格中 @for 需配合 @each 和断点变量
纯靠 @for 循环无法处理「小屏 4 列、中屏 6 列、大屏 12 列」这种多维需求。你需要先定义断点映射，再嵌套循环。例如用 $breakpoints: (sm: 3, md: 6, lg: 12)，再用 @each $key, $cols in $breakpoints 包裹 @for，才能产出带媒体查询的类。
如果跳过这层抽象，直接写三层 @for 套嵌套，代码会迅速不可读，且难以局部覆盖某一个断点的列数。
- 推荐结构：外层
@each遍历断点，内层@for生成该断点下的列数类，媒体查询用#{map-get($breakpoint-map, $key)}动态注入 - 兼容性注意：Sass 3.5+ 支持
map-get，旧版本需降级为列表 +nth() - 别忘了加
!important：响应式类优先级常被基础样式覆盖，必要时在生成规则末尾加!important（虽然不优雅，但能快速验证逻辑）
生成的类名语义弱时，必须补上文档注释
像 .grid-cols-7 这种类名，团队新人根本不知道它对应什么业务场景。Sass 编译器不会帮你解释设计意图，所有自动生成的类都得靠人工注释锚定上下文。
最常被忽略的是“为什么是 7 列”——可能是表单有 7 个字段并排，也可能是仪表盘卡片宽度刚好塞下 7 个。没有注释，半年后你自己都得翻 Git 历史查。
- 注释格式建议：在
@for循环上方用// @group Grid utilities — 7-col form layout标明用途 - 不要只写“生成 2–12 列”，要写“供后台数据表格头部筛选区使用，最大支持 12 字段并排”
- 如果项目用 VS Code，配合 SassDoc 插件可把这类注释转成 Hover 提示，比翻源码快得多
