SCSS变量无法被JS运行时修改，因其仅在编译阶段存在并被替换为固定值，最终CSS中无$符号；JS只能通过CSS自定义属性（--xxx）或.module.scss的:export机制间接读写。
SCSS 变量根本不能被 JS 运行时修改——它在构建阶段就被替换成固定值，最终 CSS 文件里连一个 $ 字符都不会留下。
SCSS 变量编译后就彻底消失
你写的 $color: #409eff 在 Webpack/Vite 编译时就被展开为 color: #409eff，浏览器解析样式时只看到纯 CSS，完全不知道 SCSS 是什么。DevTools 的 Styles 面板里搜 $color 肯定找不到，因为它不是 CSS 属性，也不是 JS 变量。
-
document.querySelector('.btn').style.color = 'red'改的只是内联样式，和$color没半点关系 - 试图用
getComputedStyle(el).getPropertyValue('$color')读取？语法错误，浏览器根本不认$开头的标识符 - 哪怕你在 SCSS 里写
color: $color，编译结果和手写color: #409eff完全等价，毫无动态性
真正能被 JS 修改的是 CSS 自定义属性（--xxx）
运行时主题切换、夜间模式、尺寸调节这些交互能力，依赖的是标准 CSS 自定义属性，不是 SCSS 变量。SCSS 的作用，是帮你更安全地生成 var(--primary-color) 这类语句。
- JS 控制：
document.documentElement.style.setProperty('--primary-color', '#ff6b6b') - SCSS 中可提前声明别名：
$primary: var(--primary-color); .btn { color: $primary; }—— 编译后就是.btn { color: var(--primary-color); } - 必须加降级值：
color: #409eff; color: var(--primary-color);，否则 IE11 或旧版 Safari 会失效
为什么 $color: var(--color) 看似可行却危险
这种写法能通过编译，但只是把字符串 "var(--color)" 当作值传下去。一旦你后续想在 calc() 或 lighten() 里复用这个值，Sass 编译器直接报错——它无法解析运行时变量。
立即学习“前端免费学习笔记（深入）”；
-
width: calc($w / 2)要求$w是编译期已知数值，var(--w)对 Sass 来说就是个普通字符串 -
background: darken($color, 10%)无法作用于var(--color)，因为darken()是 Sass 函数，只接受编译期确定的颜色值 - 不要在
@if、mix()、rem()外层套var()，Sass 编译器不认，也不报明确错误，而是静默失效
构建时共享要用 :export，而不是幻想“JS 改 SCSS 变量”
如果你需要在 JS 里读取 SCSS 里定义的主题色、断点宽度等静态常量，:export 是唯一可靠方案。它不是运行时通信，而是构建时导出字符串。
- SCSS 文件中写：
::export { primaryColor: $primary-color; spacingSm: $spacing-sm; } - JS 中导入：
import theme from './variables.scss'; console.log(theme.primaryColor); // "#409eff" - 导出的是计算后的结果（比如
darken($color, 10%)导出的是"#357abf"），不是表达式本身 - 不能导出函数调用、
map、list等复杂类型，只支持字符串、数字、布尔值
最易忽略的一点：SCSS 变量和 CSS 自定义属性名字可以一样（比如都叫 primary），但它们生命周期完全分离——一个在构建时就没了，一个在运行时才起作用。混用时若没搞清执行时机，调试起来全是“变量没生效”的假象。
