CSS变量（--color）是唯一支持运行时动态样式控制的方案，Sass变量（$color）仅在编译期存在且无法被JS读写；前者依赖浏览器原生支持、calc()运算和层叠规则，后者仅适用于编译期计算与条件逻辑。
因为CSS变量（--color）是浏览器原生支持的运行时机制，能被JavaScript直接修改并触发重绘；Sass变量（$color）在编译后就消失，JS根本读不到、改不了、也触发不了样式变化——这不是“更合适”，而是“唯一可行”。
主题切换必须靠 document.documentElement.style.setProperty()
深色模式点击即生效，靠的是注入新值到根节点：
-
document.documentElement.style.setProperty('--bg', '#121212')执行后，所有background-color: var(--bg)元素下一帧重绘 -
document.documentElement.style.setProperty('$bg', '#121212')直接报错：InvalidPropertyError，因为$bg不是合法CSS属性名 - Vue/React中写
:style="{ '--bg': themeBg }"但themeBg来自Sass变量 → 值永远是编译那一刻的快照，状态变了颜色不动
var(--x) 能响应过渡动画，$x 不能
浏览器只对“值变化”做动画，不是对“替换结果”：
-
transition: background-color 0.3s对var(--bg)有效：改值 → 触发插值动画 - 对Sass生成的硬编码值（如
background-color: #4285f4）无效：它不会“变”，只是被替换了 - 媒体查询联动也依赖此机制：
@media (prefers-color-scheme: dark) { :root { --text: #eee; } }可实时响应系统偏好
组件级覆盖天然支持，$spacing 一改全炸
CSS变量按层叠规则生效，Sass变量靠导入顺序硬控：
立即学习“前端免费学习笔记（深入）”；
-
.card { --spacing: 24px; }→ 卡片及其子元素自动继承新值，不影响其他模块 -
$spacing: 24px写在_vars.scss里，被10个组件@import后，改一处可能让按钮、表单、弹窗全乱套 - 组件库（如Ant Design）暴露
--el-color-primary供用户覆盖，无需重编译；Sass版本必须改源码 + 重新构建 - 在
<style scoped>里写:root { --color: red }不生效 —— scoped会加属性选择器，破坏:root匹配
真正容易被忽略的是边界场景：比如IE11完全不支持 --var，若项目仍需兼容，就不能只用CSS变量；又比如想用 lighten($c, 10%) 这类颜色函数，CSS变量没有等价语法，只能提前算好存成 --primary-light 等多个变量。
