可维护的原子类生成需结构化 map 与分层 @each：先定义语义化 $spacing-scale 和 $font-sizes，用带引号合法单位；方向与数值解耦两层循环；简写类单独处理；字体类优先 rem + inherit 备选；响应式嵌套 media 内部；过滤无效组合防膨胀。
用 @each 遍历 map 生成原子类时，必须先定义结构清晰的 map
直接写 @each $key, $value in (m: 4px, mt: 8px) 看似省事，但后期增删改、加响应式、对齐设计系统都会崩。真正可维护的做法是把间距、字体大小按语义分层组织：
-
$spacing-scale: 用数字键（如1→0.25rem）统一缩放，方便后续算2x、1/2 -
$font-sizes: 键名用语义别名（xs/lg），值用rem或em，避免硬编码像素 - 所有 map 值必须是合法 CSS 长度或单位字符串（如
"0.5rem"，不能是0.5rem不带引号）
生成 margin 类时，方向后缀和值映射要解耦处理
常见错误是把方向（t/b/l/r）和数值混在同一个循环里，导致生成冗余类（比如 mt-2 和 ml-2 逻辑重复）。正确做法是两层 @each：
- 外层遍历方向映射：
$directions: (t: 'top', b: 'bottom', l: 'left', r: 'right') - 内层遍历
$spacing-scale，拼出类名m#{$dir}-#{$key}和声明margin-#{$full-dir}: #{$val} - 注意：
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，子元素会连锁放大。更稳妥的方式：
- 所有字体类统一用
rem，确保不受父级影响 - 为需要继承的场景（如按钮内文字）额外提供
.text-xs-inherit类，显式写font-size: inherit - 如果设计系统要求响应式字号，
@each循环里要嵌套@media，且 media 查询必须在类选择器内部，不能反过来
编译后 CSS 体积暴增？检查是否误触「组合爆炸」
一个含 5 个方向 × 8 个间距值 × 2 种前缀（m/p）的循环，会生成 80 个类；再叠上 6 个字体大小，立刻破百。实际项目中容易忽略的点：
- 不要为所有间距值生成全部方向类——比如
space-y只需上下，gap类用gap属性原生支持，不必模拟 - 用
@if过滤掉设计规范里禁用的组合（例如mb-0没意义，直接跳过） - Sass 编译时不会自动去重，
@each生成的每个类都是独立输出，哪怕值完全相同
最常被跳过的细节：原子类命名一旦定稿，就很难安全重构。比如把 text-sm 改成 text-body，所有模板里的 class 名都得同步改——这比写 Sass 循环花时间多了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
