@each 是遍历 Map 生成工具类最直接的语法，无需函数或 mixin；但仅支持单层遍历，嵌套需手动解构，键名勿加引号，多维需嵌套 @each 并避免变量名冲突，类名拼接推荐用 #{} 插值，配合 map-get() 动态读取配置更安全易维护。
用 @each 遍历 Map 生成工具类最直接
只要 Map 结构清晰，@each 就是唯一需要的语法。它不依赖函数封装或额外 mixin 层级，避免把简单事搞复杂。注意：Sass 的 @each 只支持单层遍历，Map 嵌套需手动解构。
常见错误是把键名当字符串硬写：$key: "padding" —— 实际上 @each $key, $value in $map 中的 $key 就是原始键（可能是字符串、数字或 keyword），无需引号包裹。
- 键为字符串时，生成类名建议用
#{}插值拼接，如.p-#{$key} - 若键含连字符（如
"sm"），直接插值即可；但若键是数字（如0），Sass 会自动转成无引号数字，CSS 类名合法 - 避免在
@each内部重复定义变量，容易被下一轮覆盖
处理多维 Map 时必须手动展开层级
Sass 没有原生递归遍历 Map 的能力。比如你有一个 $spacing Map，里面按断点分组：("sm": (0: 0, 1: 0.25rem), "md": (0: 0, 1: 0.5rem))，就不能靠一层 @each 解决。
正确做法是两层嵌套：@each $breakpoint, $sizes in $spacing → 再 @each $size-key, $size-value in $sizes。此时要注意：内层 $size-key 和外层 $breakpoint 名字不能冲突，否则值会被覆盖。
立即学习“前端免费学习笔记（深入）”；
- 类名拼接建议用连字符分隔层级，例如
.p-#{$breakpoint}-#{$size-key} - 如果某一层值是 null 或空 map，加
@if map-has-key($sizes, $size-key)防止编译报错Invalid null value for $map - 不要试图用
@function返回 map 后再遍历——Sass 函数不能返回可遍历的 map 实例（仅限 Dart Sass 1.25+ 支持，且仍受限）
用 map-get() 提取配置比硬编码更安全
批量生成工具类时，属性名（如 padding）、单位（如 rem）、前缀（如 p-）往往来自统一配置。把这些抽成顶层 Map，用 map-get() 动态读取，比散落各处的字符串更易维护。
例如定义 $utils: ("padding": ("prefix": "p", "prop": "padding"))，遍历时用 $prefix: map-get($config, "prefix")，后续改前缀只需动一处。
-
map-get()查不到 key 时返回null，不会报错，但可能导致生成空类名（如.-1），务必配合@if $prefix != null校验 - 避免对同一 Map 多次调用
map-get()，可提前赋值给局部变量，减少解析开销（虽小，但批量时累积） - 单位转换（如
px→rem）别在遍历里做，应预处理好 Map 值，否则每次循环都算一次
警惕 @at-root 和选择器嵌套导致的 CSS 体积膨胀
为支持响应式，常在 @each 内用 @at-root 把类提至顶层，但若同时用了父选择器嵌套（如 .container { @each ... }），就可能意外生成 .container .p-2 这类非预期规则。
真正需要的是“脱离当前嵌套上下文”，应明确写 @at-root .p-#{$key} { ... }，而不是只写 @at-root { ... } 然后在里面写普通选择器——后者仍受外层作用域影响。
- 所有工具类必须是独立、无依赖的选择器，禁止出现在组件 scoped 块内部遍历
- 若需媒体查询，用
@media包裹声明块，而非依赖父级@media嵌套（后者会让生成的 CSS 选择器层级变深） - 开发时打开 Sass 编译的
--source-map，检查输出 CSS 是否真为扁平结构，避免隐式嵌套污染
Map 遍历本身很简单，难的是让生成结果符合项目 CSS 架构约束：类名语义是否一致、响应式断点是否对齐设计系统、单位是否统一、是否和现有工具类命名冲突。这些没法靠语法自动解决，得靠 Map 数据结构的设计精度来兜底。
