SCSS变量仅在编译期生效，无法运行时切换；真正动态主题需结合data-theme属性与CSS自定义属性（如--color-primary），通过JS控制document.documentElement.setAttribute实现切换。
SCSS 本身无法在运行时切换主题，所有主题样式必须在编译时生成；真正动态切换靠的是 data-theme 属性 + CSS 变量（--color-primary）或属性选择器（[data-theme="dark"] .btn）驱动。
为什么不能直接用 SCSS 变量做运行时主题
SCSS 变量（如 $primary-color）在构建时就被替换成固定值，打包后就没了。你改不了它，JS 也读不到它。
常见错误现象：document.documentElement.style.setProperty('--primary', 'red') 对 SCSS 变量完全无效；或者误以为 @each 循环能响应用户点击——它只在编译期跑一次。
- SCSS 是预处理器，不是运行时引擎
- 所有
@mixin、@function、@each都在 webpack / vite 编译阶段执行完毕 - 最终输出的 CSS 文件里，不会存在任何 SCSS 语法，只有纯 CSS 规则
$themes Map 必须配合 [data-theme] 选择器生成多套规则
核心是把主题配置写成 SCSS map，再用 @each 遍历生成带属性前缀的选择器块。这样一套配置，产出多套 CSS。
立即学习“前端免费学习笔记（深入）”；
示例（_themes.scss）：
$themes: (
light: (
bg: #ffffff,
text: #1e293b,
border: #e2e8f0,
),
dark: (
bg: #0f172a,
text: #f1f5f9,
border: #334155,
)
);
关键点在于使用 @mixin themeify 封装遍历逻辑（注意 !global 提升 $theme-map 作用域）：
@mixin themeify {
@each $theme-name, $theme-map in $themes {
$theme-map: $theme-map !global;
[data-theme="#{$theme-name}"] & {
@content;
}
}
}
然后这样用：
.card {
@include themeify {
background-color: map-get($theme-map, bg);
color: map-get($theme-map, text);
}
}
编译后会输出：
[data-theme="light"] .card { background-color: #ffffff; color: #1e293b; }
[data-theme="dark"] .card { background-color: #0f172a; color: #f1f5f9; }
themed($key) 函数必须搭配 !global 才能取到当前循环项的值
很多人写 @function themed($key) { @return map-get($theme-map, $key); } 却报错 Undefined variable "$theme-map"，就是因为没加 !global。
$theme-map 是 @each 的局部变量，不提升作用域，函数内部根本访问不到。
- 必须在
@each块内加$theme-map: $theme-map !global; - 否则
themed("bg")永远返回null或编译失败 - 这个陷阱在 Vue scoped style 中尤其隐蔽——
::v-deep不影响 SCSS 变量作用域
性能与维护：别让 @each 生成爆炸式 CSS
每增加一个主题，所有用 themeify 的样式都会翻倍；每加一个属性，CSS 体积线性增长。10 个主题 × 50 个组件 × 10 条规则 = 5000 行冗余 CSS。
更可持续的做法是收敛为 CSS 自定义属性：
- 在
:root中定义--color-bg、--color-text等语义化变量 - 用 JS 切换
document.documentElement.setAttribute('data-theme', 'dark') - SCSS 只负责生成初始变量值：
:root { --color-bg: #{map-get(map-get($themes, light), bg)}; } - 后续所有组件直接用
background-color: var(--color-bg)，无需重复@each
真正复杂的地方不在怎么写 SCSS，而在于主题色是否满足 WCAG 对比度要求、禁用态是否可读、深色模式下阴影是否还有效——这些都得靠设计系统约束，不是加个 @each 就能解决的。
