纯 CSS 的 repeat() 仅支持静态轨道定义，无法生成带语义、响应式断点及修饰符的可复用类名；而 Sass 的 @for 可自动化产出 .grid-cols-1 至 .grid-cols-12 等类，并结合 @each 实现断点组合，避免重复编码与维护困难。
为什么不用纯 CSS 的 repeat() 而要用 @for 生成 Grid 类
因为 repeat() 只能定义静态轨道（比如 grid-template-columns: repeat(12, 1fr)），但没法生成带语义、可复用、带响应式断点或带修饰符的类名。比如你想要 .grid-cols-1 到 .grid-cols-12，每个还带 @media (min-width: 768px) 版本——纯 CSS 写出来就是 12×N 行重复代码。@for 把这件事交给编译器，一次写对，永久生效。
@for 生成 grid-template-columns 类的实操写法
核心是把列数映射为 CSS 声明，同时避免硬编码数字导致维护困难。常见错误是直接拼字符串导致空格/单位错乱，或忘了加 !default 兼容用户自定义变量。
- 定义基础变量：
$grid-max-columns: 12 !default; - 用
@for $i from 1 through $grid-max-columns循环 - 每轮生成：
.grid-cols-#{$i} { grid-template-columns: repeat(#{$i}, minmax(0, 1fr)); } - 注意：
minmax(0, 1fr)比单纯1fr更健壮，防内容撑破容器 - 别漏掉
.grid-cols-auto这类非数字类——它得单独写，@for不覆盖
如何让生成的 Grid 类支持响应式断点
关键不是嵌套 @for，而是把断点抽象成列表，再用 @each 配合 @for 组合。否则容易写出 3 层嵌套、调试崩溃的代码。
- 先定义断点映射：
$breakpoints: ("sm": 640px, "md": 768px, "lg": 1024px); - 外层
@each $name, $width in $breakpoints，内层@for $i from 1 through 12 - 生成类名如：
.grid-cols-md-6，对应@media (min-width: #{$width}) { .grid-cols-md-6 { ... } } - ⚠️ 容易踩坑：Sass 中媒体查询不能跨文件生效，所有断点逻辑必须在同一个
.scss文件里编译，否则生成的 CSS 会丢失包裹
生成 grid-column-start/end 类时的边界处理
这类类名（如 .col-start-3）看似简单，但起始值有隐含约束：grid-column-start 最小是 1，最大不能超过总列数 + 1；超出会导致布局失效但不报错，极难排查。
- 安全做法：只生成
1到$grid-max-columns + 1范围内的值 - 例如：
@for $i from 1 through $grid-max-columns + 1 { .col-start-#{$i} { grid-column-start: #{$i}; } } - 别用
nth-child或 JS 思维去“动态算最大值”——Sass 编译期无 DOM，只能靠变量约定 - 如果项目用到了
grid-template-areas，这类类名基本无效，得提前文档说明适用场景
真正麻烦的不是循环语法本身，而是类名语义和实际 Grid 行为之间的错位。比如 .grid-cols-5 在容器只有 4 个项目时，第 5 列会空着；而开发者往往默认“列数 = 项目数”。这种隐含假设，比写错 @for 更容易引发线上布局异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
