应按数字升序生成类名以避免 css 层叠覆盖问题；使用 @for 时需确保 .grid-cols-10 在 .grid-cols-1 之后声明，推荐用 @if 判断或分段输出保证顺序。
用 @for 生成 grid-template-columns 类名时，别直接拼数字后缀
很多人写 @for $i from 1 through 12 然后生成 .grid-cols-1 到 .grid-cols-12，结果发现 .grid-cols-10 被 .grid-cols-1 的样式覆盖——因为 CSS 层叠顺序按源码位置，不是按数字大小。Sass 循环本身不排序，输出顺序就是循环顺序。
实操建议：
- 用
@if $i 单独处理个位数，避免类名前缀歧义（比如 <code>cols-1和cols-10都匹配[class*="cols-1"]） - 生成类名时统一用两位数补零：
.grid-cols-01、.grid-cols-02…更安全，也方便后续正则提取 - 别在循环里写
!important来强行覆盖——这是掩盖层叠逻辑问题，不是解决它
响应式断点嵌套中，@each 和 @for 混用容易漏掉媒体查询闭合
想为 sm、md、lg 各生成一套列数规则，有人这么写：
@each $breakpoint, $width in $grid-breakpoints {
@media (min-width: $width) {
@for $i from 1 through 12 {
.grid-cols-#{$i} { grid-template-columns: repeat(#{$i}, minmax(0, 1fr)); }
}
}
}
问题在于：如果 $grid-breakpoints 是 map，@each 迭代顺序不保证是移动优先，而且一旦某个断点没定义（比如漏了 xl），对应规则就彻底缺失。
实操建议：
- 把断点 key 提前声明为 list：
$breakpoints: sm md lg xl，再用@each遍历，控制顺序 - 每个断点内，用
@if map-has-key($grid-breakpoints, $bp)做存在性校验，避免编译报错或静默跳过 - 媒体查询块末尾不加空行或注释，Sass 有时会把下一行误判为媒体查询内容，导致样式泄露到全局
grid-gap 工具类用循环生成时，单位和计算逻辑必须显式分离
常见错误是直接写 @for $i from 0 through 8 { .gap-#{$i} { gap: #{$i}rem; } }，结果 .gap-0 生效，但 .gap-1 变成 gap: 1rem ——看着对，实际和设计系统里的 spacing-1 = 0.25rem 对不上。
实操建议：
- 定义一个 spacing scale map：
$spacings: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 0.75rem, ...)，然后@each $key, $val in $spacings - 别用
calc()在循环里动态算值，比如gap: calc(#{$i} * 0.25rem)，Sass 3.5+ 才支持运行时计算，老项目可能编译失败 - 如果要支持负边距（如
-gap-x-2），单独建负值 map，不要用-#{$i}字符串拼接，否则-0会出怪事
Sass 循环生成的 Grid 工具类，上线前必须检查 CSS 文件体积膨胀
一个包含 4 个断点 × 12 列 × 3 种间距 × 2 方向（grid-row-gap/grid-column-gap）的循环，轻松产出 300+ 类名。Gzip 后可能多出 2–3KB，对首屏渲染有感知。
实操建议：
- 用
@if $i 限制基础列数，大屏才开 8/10/12，移动端通常用不到 12 列 - 把高频用到的组合（如
.grid-cols-2 .gap-4）抽成复合工具类，比纯循环生成更省体积 - 上线前跑一次
grep -o "\.grid-cols-[0-9]\+" dist/main.css | sort | uniq -c | sort -nr，看哪些类实际被用了——很多生成的类根本没在 HTML 出现
最麻烦的不是写错循环，而是生成了一堆“看起来有用、其实没人用”的类，还卡在构建流程里跟着每次编译。删掉它们比优化循环逻辑更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
