CSS变量是唯一支持运行时动态主题切换的方案，Sass变量编译后消失，JS无法读写；CSS变量可被JS实时修改并触发重绘，遵循层叠规则且天然适配组件化，而Sass变量仅支持编译期计算与逻辑。
因为 CSS 变量（--color）是浏览器原生支持的运行时机制，Sass 变量（$color）在构建后就彻底消失——不是“更优”，而是“唯一能做动态主题切换”的方案。
JS 能否实时修改并触发重绘？
这是最根本的分水岭。CSS 变量被声明为 DOM 层级的自定义属性，浏览器会将其纳入计算样式树；Sass 变量只是文本替换，编译完连符号都不剩。
-
document.documentElement.style.setProperty('--bg', '#121212')执行后，所有background-color: var(--bg)元素会在下一帧重绘 -
document.documentElement.style.setProperty('$bg', '#121212')直接报错：InvalidPropertyError，因为$bg不是合法 CSS 属性名 - Vue 组件中写
:style="{ '--bg': themeBg }"却用$bg定义主题色 → 状态更新，颜色纹丝不动
媒体查询和深色模式能否响应系统偏好？
必须依赖 CSS 变量。Sass 无法在运行时感知 prefers-color-scheme 或窗口尺寸变化。
- 正确写法：
@media (prefers-color-scheme: dark) { :root { --text: #eee; } } - 错误做法：用 Sass 编译两套 CSS 文件再切换
<link>→ 触发 FOUC、缓存失效、过渡动画断裂 - 组件库（如 Element Plus）暴露
--el-color-primary作为定制入口；Sass 版本必须重写_variables.scss并参与构建流程
var() 能否直接参与运算？
不能。CSS 变量本质是字符串，所有数学操作必须包裹在 calc() 中；Sass 变量则天然支持算术、颜色函数、条件逻辑。
立即学习“前端免费学习笔记（深入）”；
- 合法：
width: calc(var(--gap) * 2); - 非法：
width: var(--gap) * 2;→ 整条 CSS 声明被浏览器忽略 - Sass 中可写
$size: 16px * 1.5或lighten($c, 10%)，但 CSS 变量没有对应能力，只能预设--primary-light这类衍生变量
作用域是否天然适配组件化？
CSS 变量按层叠规则继承，局部覆盖不影响全局；Sass 变量靠文件导入顺序和命名空间控制，跨文件易冲突且不支持“父传子”语义。
-
.card { --spacing: 16px; }→ 其子元素自动继承，无需额外声明 - Sass 中若在 mixin 里用
$spacing-md，必须显式传参或依赖全局定义，@use命名空间也难保无冲突 - 错误写法：Vue 组件
<style scoped>里写:root { --color: red }→ scoped 会加属性选择器，破坏:root匹配，变量不生效
真正复杂的地方在于混合使用场景：比如用 Sass 预计算 lighten($primary, 10%) 后注入为 --primary-light，再由 JS 控制开关——这种协作需要明确分工，而不是把两者当作替代品。截至 2026 年 7 月，还没有任何构建工具能真正“桥接”运行时与编译期的语义鸿沟。
