SCSS变量无法被JS运行时修改，因其仅在编译阶段存在并被替换为固定值，最终CSS中无$符号；JS只能通过CSS自定义属性（--xxx）或.module.scss的:export机制间接读写。
SCSS变量在构建阶段就被替换成固定值，浏览器运行时根本看不到$符号，所以JS不可能修改它。
SCSS变量编译后就彻底消失
你写的$color: #409eff在Webpack/Vite编译时就被展开为color: #409eff，最终CSS文件里连一个$字符都不会留下。DevTools的Styles面板里搜$color肯定找不到——它不是CSS属性，也不是JS变量。
常见错误现象：
-
document.querySelector('.btn').style.color = 'red'改的只是内联样式，和$color毫无关系 -
getComputedStyle(el).getPropertyValue('$color')直接语法错误，浏览器根本不认$开头的标识符 - 在
@if、lighten()或calc()里复用var(--color)会静默失效或报错，因为Sass函数只接受编译期确定的值
CSS自定义属性（--xxx）才是真正的运行时变量
只有--primary-color这类CSS自定义属性能被JS实时读写，并触发重绘：
- 设置：
document.documentElement.style.setProperty('--primary-color', '#ff6b6b') - 读取：
getComputedStyle(document.body).getPropertyValue('--primary-color') - 使用：
color: var(--primary-color, #409eff)（记得加降级值）
注意：所有数学运算必须包裹在calc()中，比如margin: calc(var(--spacing) * 2)；不能写width: var(--spacing) * 2，整条声明会被浏览器忽略。
如何让SCSS“生成”可被JS控制的CSS变量
SCSS在这里只是“语法糖生成器”，不是运行时引擎。关键写法：
- 在
:root里定义初始值：--primary-color: #409eff; - 在SCSS中用
$primary: var(--primary-color);建立别名，再在类中使用color: $primary;——编译后就是color: var(--primary-color); - 避免把
var(--xxx)赋给SCSS变量再传给函数，比如$c: var(--color); background: darken($c, 10%)必然失败 - Vue单文件组件可用
v-bind()直接桥接响应式数据：.text { color: v-bind(color); }
uni-app或Vue项目中落地的关键细节
动态主题切换不是换link标签，也不是改SCSS变量，而是三步闭环：
- 第一步：全局SCSS中统一用
var(--shape-radius)替代所有$radius - 第二步：JS通过
document.documentElement.style.setProperty('--shape-radius', '12px')触发更新 - 第三步：兼容性兜底——
border-radius: 12px; border-radius: var(--shape-radius);，旧版浏览器读前面，新版读后面
真正容易被忽略的是作用域和降级：CSS变量天然继承，但Sass变量不跨:deep()或scoped边界；而漏写降级值会导致IE11或iOS Safari 13.3以下直接失效。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
