如何利用Sass的@each遍历生成原子类_批量处理CSS间距与字体大小属性

如何利用Sass的@each遍历生成原子类_批量处理CSS间距与字体大小属性需要先看清适用场景和关键步骤，避免只记结论却忽略实际限制。

可维护的原子类生成需结构化 map 与分层 @each：先定义语义化 $spacing-scale 和 $font-sizes，用带引号合法单位；方向与数值解耦两层循环；简写类单独处理；字体类优先 rem + inherit 备选；响应式嵌套 media 内部；过滤无效组合防膨胀。

用 @each 遍历 map 生成原子类时，必须先定义结构清晰的 map

直接写 @each $key, $value in (m: 4px, mt: 8px) 看似省事，但后期增删改、加响应式、对齐设计系统都会崩。真正可维护的做法是把间距、字体大小按语义分层组织：

1. $spacing-scale: 用数字键（如 1→0.25rem）统一缩放，方便后续算 2x、1/2
2. $font-sizes: 键名用语义别名（xs/lg），值用 rem 或 em，避免硬编码像素
3. 所有 map 值必须是合法 CSS 长度或单位字符串（如 "0.5rem"，不能是 0.5rem 不带引号）

生成 margin 类时，方向后缀和值映射要解耦处理

常见错误是把方向（t/b/l/r）和数值混在同一个循环里，导致生成冗余类（比如 mt-2 和 ml-2 逻辑重复）。正确做法是两层 @each：

1. 外层遍历方向映射：$directions: (t: 'top', b: 'bottom', l: 'left', r: 'right')
2. 内层遍历 $spacing-scale，拼出类名 m#{$dir}-#{$key} 和声明 margin-#{$full-dir}: #{$val}
3. 注意：margin 的简写类（如 m-2）需单独处理，不能靠方向循环覆盖

@each $dir, $full-dir in $directions {  @each $key, $val in $spacing-scale {    .m#{$dir}-#{$key} { margin-#{$full-dir}: $val; }  }}.m-#{$key} { margin: $val; } // 单独写，别塞进循环

字体大小类生成要预留 font-size 变量作用域和继承控制

只写 .text-xs { font-size: 0.75rem; } 很危险——当父元素用了 em 或设置了 font-size: 1.2em，子元素会连锁放大。更稳妥的方式：

1. 所有字体类统一用 rem，确保不受父级影响
2. 为需要继承的场景（如按钮内文字）额外提供 .text-xs-inherit 类，显式写 font-size: inherit
3. 如果设计系统要求响应式字号，@each 循环里要嵌套 @media，且 media 查询必须在类选择器内部，不能反过来

编译后 CSS 体积暴增？检查是否误触「组合爆炸」

一个含 5 个方向 × 8 个间距值 × 2 种前缀（m/p）的循环，会生成 80 个类；再叠上 6 个字体大小，立刻破百。实际项目中容易忽略的点：

1. 不要为所有间距值生成全部方向类——比如 space-y 只需上下，gap 类用 gap 属性原生支持，不必模拟
2. 用 @if 过滤掉设计规范里禁用的组合（例如 mb-0 没意义，直接跳过）
3. Sass 编译时不会自动去重，@each 生成的每个类都是独立输出，哪怕值完全相同

最常被跳过的细节：原子类命名一旦定稿，就很难安全重构。比如把 text-sm 改成 text-body，所有模板里的 class 名都得同步改——这比写 Sass 循环花时间多了。