因为Sass变量仅在编译期存在，编译后即被替换为硬编码值（如#4285f4），浏览器运行时根本不存在$color这个符号，JS无法读取、修改或触发重绘，而CSS自定义属性(--color)是真实存在的CSS属性，支持JS动态操作并实时生效。
不支持。Sass变量和CSS自定义属性（--color）根本不在同一层，不能互相替代或模拟动态行为。
为什么$color不能在运行时修改
Sass变量只存在于编译前的 .scss 文件中，编译后就彻底消失，最终 CSS 里只有硬编码值，比如 color: #4285f4。浏览器运行时根本看不到 $primary-color 这个符号。
- 你在 JS 里执行
document.documentElement.style.setProperty('$primary-color', 'red')会报错：CSS 属性名非法 -
style="--primary-color: {{ dynamicColor }}"不会覆盖用$primary-color定义的样式，因为后者早已被替换成固定值 - Vue 的
<style scoped>$color: v-bind(dynamicColor);</style>是无效语法，Sass 不解析 JS 表达式
哪些场景必须用 var(--color) 而不是 $color
只要涉及运行时变更，就必须用 CSS 自定义属性。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 主题切换（深色/浅色模式）——改
document.documentElement.style.setProperty('--bg-color', '#121212')立刻生效 - 用户偏好设置（字体大小、对比度）——绑定到
input[type="range"]后直接更新--font-size - 动画中动态插值（如渐变色过渡）——
background: linear-gradient(var(--start), var(--end))配合 JS 修改 - 小程序中动态样式控制——原生不支持内联
style绑定复杂逻辑，var()是唯一可靠路径
如何把 Sass 变量“桥接”到 CSS 自定义属性
可以用 css-vars 这类 mixin 库，或手写一层映射，让开发体验兼顾 Sass 的便利性和 CSS 变量的动态性。
立即学习“前端免费学习笔记（深入）”；
- 不要写
$primary: #4285f4然后到处用 —— 改成在:root中声明--primary: #4285f4 - 如果仍想用 Sass 管理颜色体系，可这样写：
:root { --primary: #{$primary}; --secondary: #{$secondary}; } - 注意：Sass 编译时只能注入一次值，后续 JS 修改
--primary不会影响其他 Sass 变量，这是预期行为 - 避免在同一个项目里混用两套“主题系统”，比如既用
$theme又用--theme，容易导致值不同步
真正容易被忽略的是作用域层级：CSS 自定义属性继承、级联、优先级规则和普通 CSS 属性完全一致，而 Sass 变量没有作用域穿透能力。改一个 --color 可能影响几十个组件，但改一个 $color 只影响当前文件编译结果——这不是缺陷，是设计边界。
