@for虽能快速生成类，但硬编码易致维护难、体积大、语义断层；需对齐单位基数、慎用索引映射、避免字符串混用；响应式类须@each嵌套@for；map+@each更安全语义化；循环膨胀需前缀隔离与配置开关，并警惕map-keys顺序不保证。
直接说结论：@for 能快速生成大量类，但盲目用 from 1 through 12 这类硬编码会埋下维护雷、体积坑和语义断层。
@for $i from 1 through N 容易错在索引起点
很多人写 @for $i from 1 through 4 想生成 .mt-1 到 .mt-4，结果发现 mt-1 对应的是 0.25rem，而设计系统里“1”本该是 0.5rem。问题不在循环语法，而在没对齐单位基数。
- 索引
$i应直接映射倍数，比如margin-top: #{$i * 0.5rem}，而不是靠from 0 through 3再加偏移 - 单位混用（如
"#{$i}px"和#{$i * 0.25rem}并存）会导致编译无报错但运行无效——Sass 静默拼接字符串 - 补零需求（如
.w-01）不能靠$i直出，得手动拼："0#{$i}"（仅适用于 1–9），或引入sass:math做格式化
@for 套 @each 才能生成带断点的响应式类
只用一层 @for 无法生成 md:mt-2 或 lg:pl-4 这类前缀类名。Sass 不支持在 @for 中动态注入断点名到选择器里。
- 必须用
@each $breakpoint, $width in $breakpoints先遍历断点 map，再在@media内嵌套@for -
$breakpoints的 key 必须是无引号标识符（如md），否则生成的类名会是"md"-mt-2（带引号） - 如果
$width是字符串（如"768px"），@media (min-width: $width)里要加引号；是数值则不用
用 map + @each 比纯 @for 更安全、更语义化
生成颜色、字号、间距层级时，硬写 @for $i from 1 through length($colors) 会丢 key 名——你得到的是 .text-1、.text-2，不是 .text-primary。
- 颜色类优先用
@each $name, $color in $colors，天然带语义 - 字号类别用线性
@for $i from 12 through 24，视觉节奏会断裂；改用 map：$font-sizes: (sm: 0.875rem, base: 1rem, lg: 1.125rem) - 若需限制数量（如只对前 3 个颜色加 hover 变体），先
$keys: map-keys($colors)，再@for $i from 1 through min(3, length($keys))，最后nth($keys, $i)取 key
循环膨胀比你想象中更危险
一个 @for $i from 1 through 12 × 4 方向 × 5 断点，光间距类就输出 240 条规则。实际项目里 80% 的类根本不会被 HTML 引用，但浏览器仍要解析、匹配、计算。
- 加命名前缀隔离（如
$prefix: "u-"），避免跟 Bootstrap/Tailwind 撞车 - 用
@if map-has-key($config, "enable-spacing")控制开关，而不是全量输出 - PurgeCSS 是必需项，但别依赖它“兜底”——生成阶段就要克制
最常被忽略的其实是 map key 的顺序：Sass 3.4+ 的 map-keys() 不保证返回顺序，别写死“第一个一定是 primary”。真要强顺序，得用 list 显式声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
