scss map批量生成原子类的关键在于结构严谨：键名统一（如sm/md/lg），value存纯数字，单位后置；方向映射需键值对齐避免类名错乱；须用map-has-key()等守卫过滤空值，确保断点等map为键值结构而非list。
直接用 @each 遍历 map 就能批量生成原子类，但关键不在“能不能做”，而在“怎么组织 map 结构才不翻车”——多数人卡在值映射错位、命名冲突、单位混用这三处。
SCSS Map 的键值对必须严格对齐
颜色、间距、圆角这些工具类看似独立，实际共享同一套设计令牌（Design Tokens）。如果 $spacing-map 里用 sm: 4px，而 $rounded-map 里写 sm: 2px，生成的 .p-sm 和 .rounded-sm 就会语义割裂。更糟的是，有人把数值和单位混在 value 里：sm: "4px"，导致后续无法参与数学运算。
正确做法是：value 只存纯数字，单位统一后置。
$spacing-map: (sm: 4, md: 8, lg: 16);- 生成时用
#{$key}: #{$value}px;或乘以$base-unit动态缩放 - 所有 map 的 key 名必须一致（如都用
sm/md/lg），否则@each无法跨 map 对齐
@each 嵌套生成多维工具类时别硬套两层循环
想同时生成 .p-4、.pt-4、.pb-4？很多人写：
@each $dir, $vals in $padding-directions {
@each $size, $val in $spacing-map {
.#{$dir}-#{$size} { padding-#{$dir}: #{$val}px; }
}
}
问题在于 $padding-directions 如果是 (t: top, b: bottom) 这种映射，$dir 是 key（t），$vals 是 value（top），但你真正要拼进 class 名的是 t，不是 top。结果生成一堆 .top-sm 而非 .pt-sm。
更稳的写法是把方向定义为数组，用 index 控制前缀：
$dirs: (t: top, r: right, b: bottom, l: left, x: left right, y: top bottom);@each $short, $full in $dirs { ... .p#{$short}-#{$size} { padding-#{$full}: ... } }- 注意
$full是字符串，不能直接当属性名用；需拆成padding-top这种完整形式
生成类名时必须过滤空值和重复 key
设计系统升级时，常临时注释掉某个尺寸（比如删了 xs），但 map 里还留着 xs: null 或 xs: ""。这时 @each 仍会执行，生成 .m-xs { margin: null; }，编译不报错，但浏览器忽略该规则，调试时极难定位。
加一层守卫判断：
- 用
if(map-has-key($map, $key) and $value != null and $value != "")包裹生成逻辑 - 若需支持响应式断点，
@each $bp, $breakpoint in $breakpoints必须确保$breakpoints是 map，而非 list，否则$bp会是索引数字而非字符串名，导致.md:p-4变成.2:p-4 - 类名拼接时避免
-开头或连续--，比如$key: "-sm"会产出.p--sm，CSS 解析失败
最易被忽略的其实是 map 的加载顺序：所有工具类 map 必须在 @use 或 @import 后立即定义，不能放在 mixin 内部或条件块里，否则 @each 执行时 map 还未声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
