CSS自定义属性（--color）优于Sass变量（$color），因其是浏览器原生支持的运行时机制，可被JavaScript实时读写并触发重绘；而Sass变量仅在构建阶段存在，编译后即消失，JS无法干预。
因为 Sass 变量在构建阶段就消失了，浏览器根本没见过它，JS 对它做任何事都等于对空气说话。
浏览器里根本不存在 $primary-color
Sass 编译器（比如 Dart Sass）会把所有 $primary-color 替换成硬编码值，比如 #4285f4，然后删掉变量本身。最终生成的 CSS 文件里搜不到 $ 符号，CSSOM 里也没有这个实体。
-
document.documentElement.style.setProperty('$primary-color', 'red')会直接报InvalidPropertyError -
getComputedStyle(document.body).getPropertyValue('$primary-color')返回空字符串，不是undefined，是“查无此名” - Vue 的
<style scoped>里写$bg: v-bind(themeBg)完全不解析——预处理器连这行都看不到，它早被 Vite 或 Webpack 在.vue解析前就剥离了
document.documentElement.style.setProperty('--color', ...) 为什么能生效
--color 是浏览器原生支持的自定义属性，属于 CSSOM 的一部分，和 color、font-size 一样真实存在。
- 它能被
setProperty()写入，也能被getPropertyValue()读出 - 修改后触发样式重绘，所有用
var(--color)的地方立刻响应 - 必须走
document.documentElement，而不是document.body或某个组件根节点——否则子元素可能因层叠中断而拿不到新值
Sass 变量和 CSS 变量根本不在一个世界
它们分属两个完全隔离的生命周期：$color 属于构建期，--color 属于运行时。强行混用只会导致“状态变了，样式不动”的假象。
立即学习“前端免费学习笔记（深入）”；
- 常见错误：Vue 组件里
:style="{ '--bg': theme.bg }"，但底层 CSS 写的是background-color: $bg→ 编译完就是固定值，JS 改--bg完全不影响它 - 深色模式切换若依赖 Sass，实际是靠换
<link href="dark.css">，这会引发 FOUC、缓存失效、transition 中断；而setProperty('--bg', '#121212')是毫秒级响应 - 媒体查询中无法用
var()做条件判断（@media (prefers-color-scheme: dark)才是正解），但可以用 JS 监听系统偏好变更后动态改--color
真正容易被忽略的点是：你以为自己在“覆盖变量”，其实是在和编译器的时间线打架——Sass 变量只活在你保存 .scss 文件到输出 .css 这几十毫秒之间，之后它就彻底退出历史舞台了。
