map-get 与 map-keys 配合可轻量批量生成工具类：先用 map-keys 获取键名，再用 map-get 取值；@each 不支持直接解构 key/value，须改用 @each $key in map-keys($map)；嵌套值需二次解构，键名宜用纯字符串；函数封装 map 构建逻辑更可靠，返回 map 类型，避免 @warn/@debug；响应式类需用 selector-append 安全拼接；map-merge 为浅合并，深合并需 map-deep-merge；键名与 class 语义对齐依赖团队约定。
map-get 和 map-keys 怎么配合生成工具类
直接用 map-get 拿值、map-keys 遍历键名，是最轻量的批量生成路径。Sass 的 @each 只能遍历 map，不能直接拆 key/value 对，所以得靠 map-keys 先取所有键，再用 map-get 查对应值。
常见错误是写成 @each $key, $value in $map —— 这在 Sass 4.0+ 已废弃，新版会报错 "Invalid CSS after '$key': expected expression"。
- 正确写法：
@each $key in map-keys($map) { ... map-get($map, $key) ... } - 如果 map 值是嵌套结构（比如带单位或媒体查询条件），
map-get返回的是整个子 map，需二次解构 - 键名建议用纯字符串（如
"sm"），避免用数字或特殊符号，否则生成的 class 名可能非法（如.w-1.5需转义）
怎么用 @function 封装 map 构建逻辑
手写大段 map 容易出错，尤其当需要动态计算值（比如间距按 4px 基数递增）时，硬编码不可维护。用自定义函数封装构建过程，既能复用，又方便后期调整基数或公式。
例如生成 padding 工具类时，用函数生成 map 比手动写 (sm: 0.25rem, md: 0.5rem, ...) 更可靠。
立即学习“前端免费学习笔记（深入）”；
- 函数返回值必须是 map 类型，不能是 list 或 string
- 别在函数里用
@warn或@debug，它们会在编译时输出，干扰自动化流程（比如 CI 构建） - 函数参数建议设默认值，比如
$base: 0.25rem，方便项目间复用
@function make-spacing-map($base: 0.25rem, $steps: (xs: 1, sm: 2, md: 4, lg: 8)) {
$map: ();
@each $key, $multiplier in $steps {
$map: map-merge($map, ($key: $base * $multiplier));
}
@return $map;
}@at-root + selector-parse 能否用于生成响应式工具类
可以，但要小心嵌套污染。很多人想用 @at-root 把生成的 .p-sm、.p-md 提到最外层，结果发现媒体查询没生效——问题常出在没正确解析选择器。
selector-parse 返回的是 Sass 内部选择器结构（list of lists），不是字符串，直接拼接会出错；而 selector-unify 或 selector-append 才是安全操作方式。
- 响应式工具类推荐写法：先用
@each遍历断点 map，再在每个断点内用@each遍历间距 map，用@at-root包裹整个块 - 别用字符串拼接 class 名（如
".p-#{$key}"），Sass 3.4+ 后应优先用selector-append - 如果断点 map 的键是
sm、md，但对应媒体查询是(min-width: 640px)，记得提前建好映射表，别混用
map-merge 和 map-deep-merge 的性能差异在哪
小项目几乎没差别，但 map 超过 50 项、嵌套超 3 层时，map-merge 会明显变慢，因为它是浅合并：遇到同名 key 直接覆盖，不递归处理子 map。而 map-deep-merge（需自行实现或引用 sass-maps 库）会逐层合并，适合主题配置叠加场景。
典型踩坑：用 map-merge($default-map, $user-map) 覆盖字体大小配置，结果 $user-map: ("body": ("size": 16px)) 被整个替换掉 "body" 键，而不是只改 size 字段。
- 除非明确要覆盖整层，否则深合并更安全
- 自己实现
map-deep-merge时，注意递归终止条件（比如检测 value 是否为 map 类型） - Webpack / Vite 的 Sass 加载器默认不开启缓存 map 操作，高频调用函数可能拖慢热更新，可考虑把最终 map 提前导出为变量
真正麻烦的是 map 键名和生成 class 的语义对齐——比如 "font-size" 映射到 .fs-sm 还是 .text-sm，这没有技术约束，全靠团队约定，但一旦定错，后续迁移成本极高。
