SCSS变量编译后即消失，无法运行时换肤；必须用CSS自定义属性（--xxx）在:root中定义并配合JS动态修改，SCSS仅负责生成初始值和主题分支。
SCSS本身不支持运行时换肤，必须靠CSS变量（--xxx）在浏览器中实时生效；SCSS只负责“生成”这些变量的初始值和主题分支，不能替代var()和:root的作用域机制。
为什么不能直接在.card里用$color-primary做换肤
SCSS变量在编译期就消失了，输出的CSS里只剩硬编码值。用户点击切换主题时，JS根本改不了已编译完的background-color: #409eff——它不是变量，是常量。
- 所有可变样式（颜色、阴影、圆角等）必须通过
var(--card-bg)引用，且必须带fallback，比如var(--card-bg, #fff) -
$theme-light这类SCSS map只能放在非scoped的全局SCSS文件中（如src/styles/_theme.scss），否则Vue的属性选择器会隔离:root定义 - 不能把
--card-bg写在.theme-dark .card里——它必须定义在:root或html[data-theme="dark"] :root这种顶层作用域下，否则子元素读不到
:root与html[data-theme]两种声明方式的区别
前者简单直接，后者更利于SEO和渐进增强（比如服务端渲染时可预设data-theme）。但两者都要求变量必须挂载到:root上，而不是html或body。
- 错误写法：
html.theme-dark { --bg: #121212; }→ 只有html自己能读到，后代无法继承 - 正确写法：
html[data-theme="dark"] :root { --bg: #121212; }→:root被重新定义，整棵DOM树都能读取新值 - 如果用
class切换（如document.documentElement.classList.toggle('theme-dark')），对应CSS就得写成:root.theme-dark { --bg: #121212; }
SCSS如何安全生成多主题的:root块
用@each遍历主题map，避免手写重复代码，同时保证所有主题变量名一致、结构对齐。
code
$themes: (
light: (
bg: #ffffff,
text: #333333,
border: #e0e0e0
),
dark: (
bg: #121212,
text: #e0e0e0,
border: #444
)
);
:root {
@each $theme-name, $theme-map in $themes {
@if $theme-name == light {
--bg: map-get($theme-map, bg);
--text: map-get($theme-map, text);
--border: map-get($theme-map, border);
}
}
}
:root.theme-dark {
@each $theme-name, $theme-map in $themes {
@if $theme-name == dark {
--bg: map-get($theme-map, bg);
--text: map-get($theme-map, text);
--border: map-get($theme-map, border);
}
}
}
- 不要在
mix()或lighten()里传var(--primary)——SCSS编译器不认识运行时变量，会报SassError: argument $color-1 of mix() must be a color - 衍生色（如
--primary-light）必须提前在SCSS里算好，存进map，不能指望CSS变量动态计算 - 所有
var()调用处必须加fallback，防止主题未加载完成时白屏或样式错乱
最易被忽略的一点：Vue组件里用了scoped，但:root定义在外部全局文件，此时var(--xxx)仍能生效——因为CSS变量作用域不看scoped，只看继承链。但如果你把:root误写进某个里，它会被加上[data-v-xxx]，彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
