深度合并映射实现可扩展配置覆盖系统

学习 map-merge 与 map-deep-merge 自定义函数，实现多层次配置合并，用于组件库的主题覆盖。 · 难度：入门 · +10XP

深度合并映射实现可扩展配置覆盖系统

Sass map 是强大的配置容器，但 map-merge 仅做浅合并。本教程手写 map-deep-merge 递归函数，将用户传入的局部配置与默认配置深度合并，实现类似对象 assign 的效果。结合 !default 构建组件级别的可定制主题。

@function map-deep-merge($parent, $child) {
  @each $key, $value in $child {
    @if map-has-key($parent, $key) and type-of(map-get($parent, $key)) == map and type-of($value) == map {
      $parent: map-merge($parent, ($key: map-deep-merge(map-get($parent, $key), $value)));
    } @else {
      $parent: map-merge($parent, ($key: $value));
    }
  }
  @return $parent;
}
$default-config: (
  button: (
    bg: blue,
    font: 16px
  )
);
$user-config: (
  button: (
    bg: red
  )
);
$final: map-deep-merge($default-config, $user-config);