SCSS变量仅在构建阶段被替换为固定值，编译后彻底消失，浏览器无法识别或修改；真正支持运行时动态切换的是CSS自定义属性（如--primary-color），需通过JS操作style.setProperty()并配合var()引用实现。
SCSS变量根本不在浏览器运行时环境里，它在构建阶段就被替换成固定值，编译后的CSS文件中一个$符号都不会留下——所以你根本没法“修改”它。
SCSS变量编译后就彻底消失
你写的$primary-color: #409eff，经过sass或vite编译后，所有color: $primary-color全变成color: #409eff。浏览器加载的只是纯CSS，它既没见过$primary-color，也不存在这个实体。
-
document.documentElement.style.setProperty('$primary-color', 'red')会报错，因为这不是合法CSS属性 - DevTools的Styles面板里搜
$primary-color，什么都找不到 -
getComputedStyle(el).getPropertyValue('$primary-color')返回空字符串，不是undefined，是压根不识别
为什么@if $theme == 'dark'切不了主题
@if是Sass编译期指令，只在你执行sass main.scss或启动开发服务器时运行一次。此时document还没创建，localStorage、prefers-color-scheme、按钮点击事件全不可见。
- 写
$theme: 'dark'再改JS状态，样式不会响应——编译时已决定用哪套规则 - 用
vue-cli-plugin-style-resources-loader注入变量，也只是把变量提前塞进每个SCSS文件，仍无法运行时更新 - 输出的CSS里没有
@if分支，只有被选中的那部分，其余逻辑被完全丢弃
真正能动态修改的只有CSS自定义属性
浏览器原生支持--primary-color这类CSS变量，可通过style.setProperty()实时写入，并触发重绘。SCSS的作用，仅仅是帮你安全生成var(--primary-color)语句，而不是替代它。
立即学习“前端免费学习笔记（深入）”；
- 必须用
:root { --primary-color: #409eff; }声明，不能写:root { $primary-color: #409eff; }（语法错误） - 在SCSS中引用要写成
color: var(--primary-color);，不能写color: $primary-color; - 需要降级时，顺序很重要：
color: #409eff; color: var(--primary-color);，否则旧浏览器直接忽略整条声明
最容易被忽略的是：SCSS源码里的$和最终浏览器里的--之间没有自动映射关系，必须靠#{$primary-color}插值显式注入，且一旦插值完成，就失去了运行时可变性——所以别把动态逻辑塞进SCSS变量里，该交给CSS变量的，就只交给CSS变量。
