直接用 @each 遍历 Map 生成主题类名会失效，因编译期展开时未将变量注入选择器上下文，导致样式丢失作用域；须用 @mixin 封装逻辑并在每个主题类内调用，确保继承链完整。
为什么直接用 @each 遍历 Map 生成主题类名会失效？
因为 Sass 的 @each 在编译期展开，而 CSS 类名（如 .theme-dark）必须对应真实存在的选择器结构；如果遍历时没把变量正确注入到选择器上下文，生成的样式规则会丢失作用域或被覆盖。常见错误是写成：
@each $theme, $map in $themes {<br> .#{$theme} { /* 没有嵌套全局样式入口 */ }<br>}结果是每个主题只有一层空壳，无法继承基础样式。
必须用 @mixin 封装主题样式逻辑
把通用样式抽成可复用的 mixin，再在每个主题作用域内调用它，才能保证样式继承链完整。关键点在于：主题类名要作为父级选择器包裹所有组件样式，且 mixin 内部必须用 $color、$bg 等局部变量接收当前主题值。
- 定义主题 Map 时，每个子 Map 必须包含完整颜色语义键，比如
primary、text、bg - mixin 参数不能默认为空，否则编译时会报
Undefined variable - 调用
@include theme-styles($theme-map)前，先用#{$theme-name}构建外层 class
示例片段：
$themes: (<br> light: (primary: #007bff, text: #333, bg: #fff),<br> dark: (primary: #0056b3, text: #f8f9fa, bg: #212529)<br>);<br><br>@mixin theme-styles($vars) {<br> color: map-get($vars, text);<br> background-color: map-get($vars, bg);<br> a { color: map-get($vars, primary); }<br>}<br><br>@each $theme, $vars in $themes {<br> .theme-#{$theme} { @include theme-styles($vars); }<br>}
如何让 JS 切换皮肤时真正生效？
CSS 类名生成只是第一步，JS 控制的是 <html> 或 <body> 上的 class。如果生成的类名是 .theme-dark，但 JS 加的是 dark-mode，那就完全不匹配。
- 保持命名一致：Sass 里用
.theme-#{$theme}，JS 就用document.documentElement.className = 'theme-dark' - 避免用
!important覆盖主题色——它会破坏 map 变量的优先级链 - 如果用了 CSS 自定义属性（
--primary-color），Sass 中需配合:root+#{}插值生成不同 scope，而非单纯 class 切换
Map 嵌套过深会导致编译慢或报错吗？
不会直接报错，但超过 3 层嵌套（比如 light > components > button > hover）会让 map-get 链变得脆弱。一旦某层 key 缺失，map-get(map-get(...), 'hover') 返回 null，后续 color 函数（如 darken($color, 10%)）就会抛 Invalid CSS after "...": expected expression。
- 推荐扁平化结构：用连字符命名键，如
button-bg、button-hover-color - 用
@if map-has-key($map, $key)做存在性检查，比靠报错定位更可控 - 开发阶段加个
@warn 'Missing #{$key} in #{$theme}'提示缺失项
真正容易被忽略的是：主题切换后，表单控件（<select>、<input type="range">）的原生样式不会自动响应 class 变化，得单独重置 appearance 和伪元素。
