@for生成工具类时索引应从1开始以匹配设计系统基数，推荐直接用$i映射倍数；响应式需@each嵌套@for；颜色类宜用@each遍历map；须警惕循环膨胀并配合purgecss。
用 @for 生成间距工具类时，索引从1开始才符合直觉
很多人写 @for $i from 1 through 4 却发现 mt-1 对应的是 margin-top: 0.25rem，不是预期的 0.5rem。问题出在没对齐设计系统基数——多数 UI 框架（如 Tailwind）的 1 表示最小单位（通常是 0.25rem），所以循环变量直接映射到倍数更安全。
- 推荐写法：
@for $i from 1 through 4 { .mt-#{$i} { margin-top: #{$i * 0.25rem}; } } - 别用
$i from 0 through 3再加 1，容易在条件判断或命名时漏掉偏移 - 如果单位不统一（比如混用
px和rem），@for会静默拼接字符串，编译不出错但运行时无效
生成响应式工具类必须嵌套 @each + @for，不能只靠一层循环
想让 md:mt-2 在中屏生效、lg:mt-3 在大屏生效，只用 @for 无法生成带前缀的类名。Sass 不支持在 @for 中动态拼接媒体查询断点名并注入选择器，得靠 @each 遍历断点配置，再在里面套 @for。
- 典型结构：
@each $breakpoint, $width in $breakpoints { @media (min-width: $width) { @for $i from 1 through 4 { .#{$breakpoint}-mt-#{$i} { margin-top: #{$i * 0.25rem}; } } } } - 注意
$breakpoints必须是 map 类型，键为字符串（如"md"），否则生成的类名会带引号变成"md"-mt-1 - 如果断点 map 的 value 是字符串（如
"768px"）而非数值，@media里要加引号；是数值则不用
@for 生成颜色工具类时，map-get 比硬编码更易维护
直接写 @for $i from 1 through length($colors) 看似省事，但一旦 $colors 是 map（比如 (primary: #0d6efd, success: #198754)），length() 返回的是 key 数量，而 $i 只是数字，拿不到 key 名——结果就是生成一堆 text-1、text-2，完全没法用。
- 正确做法：用
@each $name, $color in $colors { .text-#{$name} { color: $color; } }，不需要@for - 非要混合用（比如只对前3个颜色生成 hover 变体）：先
$keys: map-keys($colors)，再@for $i from 1 through min(3, length($keys))，然后$name: nth($keys, $i)，最后map-get($colors, $name) - 忽略 map key 顺序：Sass 3.4+ 的 map-keys 返回顺序不保证，别依赖“第一个一定是 primary”
大量循环导致 CSS 体积暴涨，生成前先确认是否真需要全量
一个 @for $i from 1 through 12 套 4 个方向（mt/mr/mb/ml），再乘以 5 个断点，光间距类就输出 240 个规则。实际项目里 80% 的类根本不会被用到，但浏览器仍要解析、匹配、计算。
- 上线前用 PurgeCSS 或 UnoCSS 这类工具删未使用的类，别指望手写循环“够用就好”
- 开发阶段可加
@if $debug { ... }开关，临时关闭某类循环，避免编译卡顿 - Sass 编译时不会优化重复计算，比如
#{$i * 0.25rem}被算 12 次，不如提前定义$spacers: (1: 0.25rem, 2: 0.5rem, ...)再@each
循环本身不难，难的是想清楚哪些值该进循环、哪些该进配置、哪些压根不该生成——尤其是团队协作时，别人改了 $spacers map，你的 @for 可能还在按旧逻辑跑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
