SCSS变量无法动态切换主题，必须通过:root块用#{$var}插值导出为CSS自定义属性--var，再由JS通过dataset.theme切换data-theme触发对应CSS规则。
不能在SCSS里“动态生成”CSS变量——SCSS编译完就没了，真正能被JavaScript改的只有--xxx这类CSS自定义属性。你实际要做的，是用SCSS帮人写得更稳、更少出错，把变量映射关系提前铺好。
为什么$primary-color不能直接切换主题
SCSS变量$primary-color在Webpack或Vite构建时就被替换成具体颜色值（比如#3b82f6），最终输出的CSS里根本没它。运行时JS调document.documentElement.style.setProperty('--primary-color', 'red')，改的只是--primary-color，跟$primary-color毫无关系。
常见错误现象：
– 在_button.scss里写了color: $primary-color，换主题后按钮颜色纹丝不动
– 把$primary-color: var(--primary-color)直接塞进SCSS，结果编译报错Invalid CSS after "$primary-color:": expected expression
- SCSS变量只存在于编译前，不参与运行时
-
var(--xxx)必须出现在CSS属性值位置，不能当SCSS变量赋值来源 - 所有主题分支（light/dark/purple）都要完整定义
--primary-color等变量，缺一个就会回退到inherit或initial
:root里怎么安全导出SCSS变量为CSS变量
把SCSS变量转成CSS变量，唯一可靠方式是在:root块里用#{$primary-color}插值语法。这个动作必须发生在SCSS编译阶段，不是运行时。
立即学习“前端免费学习笔记（深入）”；
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
实操建议：
– 单独建_variables.scss，只放$primary-color: #3b82f6这类声明，不写样式
– 在main.scss最顶部@import 'variables'，确保顺序优先
– 紧接着写:root { --primary-color: #{$primary-color}; }，别漏大括号
错误写法：[data-theme="dark"] { --primary-color: $primary-color; } —— 这里$primary-color还是编译时值，不是暗色主题的值
- 深色主题必须另起
:root[data-theme="dark"]块，重新插值：--primary-color: #{$dark-primary-color} - 不要用
.dark .btn这种局部作用域覆盖变量，其他组件读不到 - 插值语法
#{$xxx}只在SCSS里有效，JS里不能用
JS切换主题时该操作document.documentElement还是dataset
直接写document.documentElement.style.setProperty('--primary-color', '#722ed1')最直白，但在微信小程序旧基础库（如2.25.2之前）会失效；更稳的方式是切data-theme属性，靠CSS规则自动生效。
推荐做法：
– 统一用document.documentElement.dataset.theme = 'purple'
– 所有主题CSS都基于:root[data-theme="xxx"]编写，不依赖JS手动设变量
– 避免混用两种方式，否则容易覆盖冲突
- 切
dataset兼容性更好，且天然支持伪类级联（比如[data-theme="dark"] .card可额外加样式） - 如果真要用
style.setProperty，务必在mounted或onLoad后执行，避免DOM未就绪 - 切换后记得触发
prefers-color-scheme监听，否则系统深色模式变化时不会同步
真正容易被忽略的是变量完整性：哪怕浅色和深色主题中--border-color值一样，也得在两个:root块里都写一遍。漏写=浏览器用默认值，UI可能突然断层。这不是玄学，是CSS变量继承链的硬规则。
