scss换肤需在编译期完成，核心是用@mixint themeify封装遍历、theme-var()函数强制字面量key、统一$themes map结构、js切换时操作document.documentelement。
SCSS 本身不支持运行时换肤，所有主题逻辑必须在编译期完成；所谓“优雅”，核心是避免重复写选择器、避免变量污染、避免 key 不一致导致 map-get 返回 null。
用 @mixin themeify 封装遍历逻辑，而不是手写 [data-theme="dark"]
手动为每个主题写一遍选择器极易出错，尤其当主题数超过 3 个或组件嵌套变深时。正确做法是把遍历封装进 mixin，让 SCSS 自动展开：
-
@mixin themeify内部用@each $theme-name, $theme-map in $themes遍历主题 map - 必须加
$theme-map: $theme-map !global，否则theme-var()函数里读不到当前主题的 map - 选择器写成
[data-theme="#{$theme-name}"] &，&保证嵌套上下文不丢失（比如在.button里调用，生成的是[data-theme="dark"] .button） - 不要用
:root[data-theme]直接设 CSS 变量——这会覆盖组件内联样式优先级，导致color: var(--text-color)失效
theme-var($key) 函数必须用字面量 key，不能传变量
map-get($theme-map, $key) 中的 $key 必须是字符串字面量（如 'bg'），否则编译报错。常见错误写法：theme-var($prop)，其中 $prop 是变量 —— 这行不通。
- 正确调用：
background-color: theme-var('bg'); - 错误调用：
$prop: 'bg'; background-color: theme-var($prop);（编译失败） - 如果真需要动态 key，得用
meta.get-function+call，但极不推荐——破坏可读性且难调试 - 所有主题 map 的 key 必须严格一致，比如
light和dark都要有bg、text、primary，缺一个就导致某主题下theme-var('bg')返回空
主题配置必须用 $themes map，别用独立变量
写一堆 $primary-light、$primary-dark 看似简单，实际不可维护。新增主题要改十几处，漏一处就错色。
- 统一用
$themes: (light: (bg: #fff, text: #1e293b), dark: (bg: #0f172a, text: #f1f5f9)); - map 结构天然支持 JS 导出（通过
sass-true或自定义导出脚本），方便后续做运行时 fallback 或 SSR 主题透传 - 路径引用要小心：
@import '_themes.scss'文件名带下划线，防止被 webpack 单独编译成 CSS 文件 - 别在变量值里写表达式，比如
bg: rgba(#000, .1)—— 这会让 map 值变成复杂结构，map-get拿不到原始颜色值
最易被忽略的一点：JS 切换主题时，必须操作 document.documentElement.setAttribute('data-theme', 'dark')，而不是 body 或某个 wrapper 元素 —— 否则 [data-theme] 选择器无法命中根级样式规则，部分继承属性（如 color、font-family）会回退到浏览器默认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
