map-get仅在编译期安全取值，无法运行时切换；真正实现运行时主题切换的是CSS自定义属性与[data-theme]选择器配合。
map-get 本身不能解决运行时切换，只能帮你组织编译期数据
很多人以为 map-get 是个“动态取色函数”，一调用就能根据当前主题返回颜色——不是的。map-get 在 Sass 编译阶段就执行完了，输出的是固定值（比如 #4285f4），JS 根本改不了它。真正负责运行时切换的是 CSS 自定义属性（--text-color）和 [data-theme] 属性选择器。
所以 map-get 的真实作用是：在编译时，从你定义好的主题 map 里安全、可校验地抽出某个 key 对应的颜色，避免硬编码或拼错变量名。
- 必须搭配
@function封装，否则每次都要写map-get(map-get($themes, $theme-name), $key)，冗长且易错 - 函数里要加
map-has-key判断，否则取不到 key 时只返回null，不报错，样式就丢了 - 不要在
@mixin里直接用map-get查全局$themes，除非你用!global显式提升作用域，否则可能读到空 map
主题 map 必须扁平、键名严格一致，否则 map-get 失效
map-get($theme-map, text) 返回 null 的最常见原因，不是函数写错了，而是 $theme-map 里压根没有叫 text 的 key——比如你定义的是 "text-color" 或 textColor，但 JS 代码里却按 text 去读，或者不同主题的 key 名对不上。
- 所有主题（
light、dark、brand-a）必须使用完全相同的 key 名集合：bg、text、primary、surface……一个都不能少，大小写、连字符、下划线都得统一 - map 结构建议扁平，别嵌套两层以上；Sass 原生不支持
map-deep-get，自己写容易漏边界判断 - key 名推荐用短字符串（如
text），别用带引号的长名（如"text-primary"），插值生成 CSS 变量时更干净：--text: #{...}而不是--"text-primary": ...
用 @each + [data-theme] 生成选择器，别手写
如果你有 4 个主题，手写 [data-theme="dark"] .btn { color: #f1f5f9; } 这类规则，漏写一个、拼错一个、颜色配错一个，都是大概率事件。而 @each 能保证每个主题的每个 key 都被遍历到，且结构一致。
立即学习“前端免费学习笔记（深入）”；
- 必须用
[data-theme="#{$theme-name}"] &写法，&保留父选择器上下文，适合在 mixin 里复用（比如.button调用后生成[data-theme="dark"] .button） - 别用
:root[data-theme]直接覆盖 CSS 变量，这会破坏内联样式优先级，导致color: var(--text-color) !important失效 - 生成 CSS 变量时，必须用插值
#{map-get(...)}，否则输出的是字面量map-get(...)，浏览器不认识
JS 切换 data-theme 后，CSS 变量不会自动刷新？检查三件事
点按钮切了 data-theme="dark"，但颜色没变——问题几乎一定出在 CSS 层，而不是 JS。
- 是否漏了给
:root设置默认主题？首次渲染时若[data-theme]还没设，var(--text-color)会 fallback 到inherit或透明，看起来像“没生效” - 是否把所有组件颜色都改成
var(--text-color)？如果还混着用map-get($theme, text)编译出的死值，那这部分永远不变 - 是否持久化了
data-theme？刷新页面后回到默认值，不是 bug，是忘了存localStorage并在页面加载时恢复
复杂点在于：Sass 的 map 和函数只管编译期组织，而运行时切换靠的是 CSS 变量继承链 + 属性选择器匹配精度。两者衔接处最容易断——比如 JS 改了属性，但 CSS 没生成对应块，或生成了但优先级不够高，就被其他样式盖掉了。
