用嵌套$theme map分层存语义化配置，配合map-get()链式取值+map-has-key()守卫及@each批量生成[data-theme]规则块；键名类型需严格一致，深层访问须链式调用或封装函数，主题切换依赖css变量而非sass变量。
直接结论：用嵌套 $theme Map 分层存语义化配置，配合 map-get() 链式取值 + map-has-key() 守卫，再通过 @each 批量生成 [data-theme] 规则块——不是靠 JS 动态改变量，而是编译期产出可切换的 CSS 块。
为什么 map-get($theme, "primary") 总返回 null
最常见原因是键名类型不匹配：Sass 要求 map-get() 的第二个参数必须和定义时的 key 字面量完全一致。
- 定义是
("primary": #007bff)→ 调用必须是map-get($theme, "primary")（双引号） - 定义是
(primary: #007bff)→ 调用必须是map-get($theme, primary)（无引号、标识符） - 混用
main-color和mainColor会被视为两个不同 key，Sass 不自动转换 - 如果
$theme是多层嵌套结构（如colors: (primary: ...)），map-get($theme, "primary")必然为null，因为primary不在顶层
嵌套 Map 取值必须链式调用，不能用点语法
Sass 原生不支持 map-get($theme, "colors.primary") 或 $theme.colors.primary 这类写法。所有深层访问都得手动拆解或封装函数。
- 安全写法：
map-get(map-get($theme, "colors"), "primary") - 推荐封装：
@function theme-color($key) { @return map-get(map-get($theme, "colors"), $key); } - 避免中间值非 map：比如
map-get($theme, "colors")返回了颜色值（如#fff）而非 map，下一层map-get()就会报错Argument '$map' of map-get() must be a map - 加守卫更稳妥：
@if type-of($submap) != 'map' { @error "Expected map, got #{$submap}"; }
用 @each 生成 [data-theme] 规则时，key 必须是字符串字面量
要批量输出 [data-theme="light"] .btn 和 [data-theme="dark"] .btn，@each 的 key 必须是带引号的字符串，否则 Sass 编译失败。
- ✅ 正确：
$themes: ("light": (bg: #fff, text: #333), "dark": (bg: #111, text: #eee)); - ❌ 错误：
$themes: (light: (...), dark: (...));→Undefined variable "light" - 插值写法：
[data-theme="#{$theme-name}"] & { color: map-get($theme-map, "text"); } - 别在 map 中用变量当 key：
$name: "light"; #{$name}: ()是非法语法
主题切换真正起效靠的是 CSS 变量，不是 Sass 变量
Sass 编译完就没了，$primary-color 在最终 CSS 里只是个固定值。运行时能换色的只有 var(--color-primary)。
- 必须把 Sass Map 吐成
:root和[data-theme]下的 CSS 变量：--color-primary: #{map-get(map-get($themes, "light"), "primary")}; - 组件中统一用：
color: var(--color-primary);，而不是color: map-get(...); - JS 切换主题只需：
document.documentElement.setAttribute('data-theme', 'dark'); - 漏掉
:root默认值会导致首次渲染时var(--color-primary)无 fallback，文字可能透明或继承错误颜色
最易被忽略的一点：所有主题子 map 的键名必须严格一致。比如 "light" 里有 "text" 和 "bg"，"dark" 里也必须有同名键——否则 map-get($theme-map, "text") 在某个主题下返回 null，编译不报错但 CSS 值非法，最终样式丢失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
