必须用#{}插值将sass变量值注入css变量，因sass变量仅存于编译期，直接写$primary-color会导致浏览器解析非法语法而忽略声明。
直接用 $themes map 定义调色板，配合 @each 和 #{} 插值批量导出为 :root 中的 CSS 变量——Sass 变量管定义，CSS 变量管运行时切换，二者不能混用或互相替代。
为什么不能直接在 :root 里写 $primary-color
因为 $primary-color 是 Sass 编译期变量，编译后就消失了。:root { --primary: $primary-color } 会原样输出到 CSS 文件中，浏览器不认识 $primary-color 这个语法，最终变成无效声明。必须用插值：--primary: #{ $primary-color };。常见报错 Invalid CSS after "--primary:" 就是忘了 #{}。
怎么用 map 组织多主题调色板并安全导出
把所有主题存进一个顶层 $themes map，每个子 map 的 key 必须统一（如都叫 primary、bg、text），否则 map-get() 取不到值：
$themes: (
light: (
primary: #409eff,
bg: #ffffff,
text: #303030
),
dark: (
primary: #66b1ff,
bg: #1f2937,
text: #f9fafb
)
);
导出时用 @each 遍历，确保每个主题都生成对应 [data-theme] 块：
@each $theme-name, $theme-map in $themes {
[data-theme="#{$theme-name}"] {
--primary-color: #{map-get($theme-map, primary)};
--bg-color: #{map-get($theme-map, bg)};
--text-color: #{map-get($theme-map, text)};
}
}
- 必须用
[data-theme]而非:root[data-theme]，否则会破坏组件内联样式优先级 - 导出前建议加
@debug map-get($theme-map, primary)验证值存在，避免Invalid null value for `#{}` -
#{}不支持null、map或函数，只接受颜色、数字、字符串等基础类型
如何让 JS 切换主题时真正生效
CSS 变量导出只是第一步，JS 必须通过 document.documentElement.setAttribute('data-theme', 'dark') 触发匹配，而不是 style.setProperty() 单改某个变量：
-
style.setProperty('--primary-color', 'red')只改一个值，无法同步--bg-color和--text-color，主题断裂 - 没给
:root设默认值的话，首次渲染时var(--primary-color, #007bff)的 fallback 才起作用；漏写 fallback 会导致颜色透明或继承异常 - 如果用了
!important在组件里写死颜色（如color: #333 !important），CSS 变量会被无视——得全项目搜替换掉硬编码
最易被忽略的是变量作用域和加载顺序：@use 下的变量不共享，$themes 必须在所有 @use 之前定义，且只定义一次；!default 只在首次赋值时有效，重复声明等于无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
