直接用@each遍历$themes生成主题规则可行，但必须用@mixin封装并注入变量，否则因作用域缺失导致样式失效；生成:root[data-theme]时需用#{}插值确保属性值正确，且sass、html、js三端命名须严格一致。
直接用 @each 遍历 Sass $themes Map 生成主题规则是可行的，但必须配合正确的上下文封装和变量注入方式，否则编译出的选择器会失效或无法继承样式。
为什么 @each $theme, $map in $themes 单独写在顶层会失效
因为 Sass 在编译期展开 @each 时，若未将当前主题变量注入到选择器作用域内，生成的 CSS 规则就只是孤立的类名（如 .theme-dark），里面没内容；更常见的是写了 .#{$theme} { color: map-get($map, text) } 却漏掉 @mixin 封装，导致 $map 在该作用域不可访问——Sass 报错 Undefined variable "$map"。
- 必须把样式逻辑抽成
@mixin theme-styles($vars)，并在@each内部调用它 -
$vars必须是完整 map，且每个 key（如text、bg）都存在，否则map-get($vars, text)返回null - 不能在
@each外层再套一层@each $key, $val in $vars全量输出所有键——只取需要的语义值
如何用 @each 正确生成 :root[data-theme] 自定义属性
这是 JS 切换主题最轻量的路径：不操作 class，只改 data-theme 属性，靠 CSS 变量自动响应。关键点是 :root 必须带属性选择器，且插值要写在引号里。
- 写法必须是：
:root[data-theme="#{$theme-name}"] { --text-color: #{map-get($theme-map, text)}; } - 别漏掉
#{}插值，写成:root[data-theme="$theme-name"]会被当字面量解析 - 如果主题超过 3 个，手写
:root[data-theme="dark"]等规则极易遗漏，@each是唯一可维护方案 - 注意：CSS 变量名统一用小写+短横线（如
--primary-color），别用点号或大写
JS 切换时样式不生效？先核对三处命名一致性
90% 的“切换无效”问题出在命名断层：Sass 编译出的选择器、HTML 上挂的属性或 class、JS 修改的目标，三者不一致。
- Sass 里生成的是
:root[data-theme="dark"]→ JS 就得写document.documentElement.setAttribute('data-theme', 'dark') - 如果 Sass 生成的是
.theme-dark→ JS 就得写document.documentElement.className = 'theme-dark' - 别混用：比如 Sass 输出
[data-theme="dark"]，JS 却加class="dark"，完全不匹配 - 浏览器开发者工具里检查
:root元素，看当前激活的data-theme值是否命中某组变量块
Map 嵌套过深或键名不一致导致 map-get 返回 null
不是所有颜色都需要嵌套结构。扁平 map（如 (primary: #007bff, bg: #fff)）已覆盖绝大多数场景；一旦嵌套，map-get(map-get($theme, components), button) 这种链式调用极易因某层 key 缺失而中断。
- 键名必须完全一致：写
map-get($map, "text")而 map 定义是text: #333，没问题；但若定义是"text-color": #333，就必须用map-get($map, "text-color") - 不要依赖
inspect()或type-of()调试，直接在@mixin开头加@if not map-has-key($vars, text) { @error "Missing 'text' key in theme map"; } - 所有主题子 map 必须包含相同语义键，否则
@each遍历时某次迭代会崩
真正容易被忽略的是：Sass 编译结果不可见运行时逻辑，一旦 map-get 返回 null，CSS 里就是空值，浏览器按默认色渲染，你却看不到任何报错提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
