map-merge仅单层覆盖不递归合并，嵌套子map会被整体替换；安全方案是扁平化配置、模块化扩展、显式注入，或严格实现深度合并函数。
map-merge 不能动态合并嵌套配置，它只做单层覆盖——你传进去的子 map 会被整个替换，不是“合并键值”，更不是“递归更新”。想靠它拼接团队共享的 $theme-colors 或 $type-scales，十有八九会丢键、错色、编译无声失败。
为什么 map-merge 合并后子键全没了
它不检查 value 类型。只要 key 存在，就直接用新值覆盖旧值，不管旧值是 #007bff 还是 ("hover": #0056b3, "disabled": #6c757d)。
- 现象：
$colors: ("primary": ("base": #007bff)); $new: ("primary": ("hover": #0056b3)); map-merge($colors, $new)→ 结果里primary只剩{"hover": #0056b3}，base消失 - 原因：Sass 把
primary当作一个整体 key 处理，不深入其 value 内部 - 后果：Bootstrap 主题定制中改
$theme-colors，结果 hover 色生效了，但active和disabled全挂了
怎么安全地“动态合并”团队配置
真要支持多人协作更新同一份主题配置，必须放弃幻想，分清编译期和运行时边界：
- 团队共用一份基础
_config.scss，定义扁平$theme-colors: ("primary": #007bff, "success": #28a745)，禁止往里塞嵌套结构 - 各业务模块用独立变量存扩展逻辑：
$btn-primary-states: ("hover": darken(#007bff, 10%), "disabled": desaturate(#007bff, 50%)) - 最终样式里手动组合：
background-color: map-get($btn-primary-states, "hover")，而不是试图 merge 进$theme-colors - 如果非得统一入口，用
@use "config" with ($theme-colors: ("primary": #007bff))显式注入，不依赖map-merge
如果非要写深度合并函数，注意三个硬限制
Dart Sass 支持递归，但容易翻车：
- 必须用
@use "sass:map"才能调map-has-key和map-get，否则编译报错 -
type-of()是唯一判断是否为 map 的方式，漏判会导致map-get参数类型错误 - 函数必须放在所有被 merge 的变量声明之后，否则
map-get($a, $key)取到null，递归崩栈 - 示例骨架（别直接抄）：
@use "sass:map";<br>@function map-deep-merge($a, $b) {<br> $result: $a;<br> @each $key, $value in $b {<br> @if map-has-key($a, $key) and type-of(map-get($a, $key)) == "map" and type-of($value) == "map" {<br> $result: map-merge($result, ($key: map-deep-merge(map-get($a, $key), $value)));<br> } @else {<br> $result: map-merge($result, ($key: $value));<br> }<br> }<br> @return $result;<br>}
真正难的不是写函数，而是让所有人约定好：配置即数据，扁平即正义。一旦允许嵌套，合并逻辑就从工具问题变成治理问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
