必须用$colors等Map而非零散变量，因Map能天然隔离颜色、间距等5类语义域，避免重复定义、命名混乱和硬编码遗漏；map-get编译期安全取值，拼错key返回null不中断构建。
为什么不用零散变量而必须用 $colors 这类 Map？
后台系统主题涉及颜色、间距、圆角、断点、文本色、边框色等至少 5 类语义域，硬写 $primary-color、$sm-spacing、$border-radius-sm 等离散变量，很快会出现：
• 同一语义被多个模块重复定义（比如两个组件都写了 $text-color）
• 命名风格混乱（$space-xs vs $spacing-xsmall）
• 搜索替换漏掉某处硬编码（.btn--danger { color: #f56c6c; }）
Map 把语义分组固化进结构里，$colors 只管颜色、$spacing 只管间距，天然隔离作用域，编译期就能靠 map-get($colors, 'primary') 防止拼错 key —— 错了返回 null 而不是中断构建。
Element Plus 主题定制中 map.deep-merge 的实际用途
Element Plus 的 var.scss 用 map.deep-merge 合并默认值与自定义配置，这是关键设计：
• 它允许你只覆盖部分颜色，比如只改 primary.base，其余 success、warning 保持原样
• 不会因遗漏某个子键（如 'primary': ( 'light': #a0d8ef )）导致整个 map 被清空
• 直接写 $colors: ( 'primary': ( 'base': #2563eb ) ); 是错的 —— 这会丢掉所有其他颜色分支
正确做法是先 @use "element-plus/theme-chalk/src/common/var" as *;，再用 map.deep-merge 增量更新：
$custom-colors: (
'primary': (
'base': #2563eb,
'light': #dbeafe,
),
);
$colors: map.deep-merge($custom-colors, $colors);
如何让自定义主题同时生效于 SCSS 编译期和运行时 CSS 变量？
Element Plus 的双层变量系统意味着：SCSS 变量控制组件样式生成，CSS 变量支持运行时切换。两者需对齐：
• 所有 SCSS Map 的顶层 key（如 'primary'、'spacing'）必须与 CSS 变量前缀一致（--el-color-primary、--el-spacing-xs）
• 在 _variables.scss 里用 :root 批量注入 CSS 变量，例如：
@each $name, $value in $colors { --el-color-#{$name}: #{map-get($value, 'base')}; }
• 若跳过这步，JS 动态换肤时 CSS 变量为空，样式就断层
• 注意：CSS 变量不支持嵌套结构，所以 map-get($colors, 'primary', 'light') 必须扁平化为独立变量
深层嵌套 Map 访问时的防御性写法
像 $colors: ('primary': ('base': #409eff, 'light': #e6f7ff)) 这种结构，直接 map-get($colors, 'primary', 'light') 会报错 —— map-get 最多只接受 3 个参数，不支持多级解构。
安全访问必须分步或加守卫：
• 先 $primary-map: map-get($colors, 'primary')，再 map-get($primary-map, 'light')
• 或用 map-has-key($primary-map, 'light') 判断是否存在，避免构建失败
• 更推荐封装一个 color() 函数统一处理，内部做 map-has-key 检查，返回 fallback 值
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：Map 结构一旦定型，后续新增语义维度（比如加个'gradients' 分组）必须同步更新所有遍历逻辑（@each、函数、CSS 变量注入），否则新配置不会进入最终 CSS。这不是语法错误，而是静默失效。 
