CSS变量（--color）是唯一支持运行时动态样式控制的方案，Sass变量（$color）编译后即消失，JS无法读取、修改或触发重绘；二者分属浏览器运行时与构建工具编译期，本质不同，分工明确。
CSS变量（--color）不是“比Sass变量更优”，而是唯一能做运行时动态样式控制的方案；Sass变量（$color）在编译后就彻底消失，JS根本读不到、改不了、也触发不了重绘。
为什么document.documentElement.style.setProperty('--color', 'red')立刻生效，而setProperty('$color', 'red')报错
CSS变量是浏览器原生支持的自定义属性，真实存在于DOM计算样式中；Sass变量只是预处理器内部的文本占位符，编译完就从CSS里蒸发了——输出文件里连$color的字符都不会出现。
-
--color是合法CSS属性名，浏览器认识它，getComputedStyle()能取值，setProperty()能改值，改完立即触发重绘 -
$color不是CSS语法，浏览器直接拒绝解析，控制台执行会抛出InvalidPropertyError - 常见错误：Vue组件里写
:style="{ '--bg': themeBg }"却用$bg定义主题色 → 值永远是编译时的死值，状态变化毫无反应
var(--gap) * 2 无效，但 calc(var(--gap) * 2) 可行
CSS变量本质是字符串，不能直接参与运算；所有数学操作必须包裹在calc()中。Sass变量则天然支持加减乘除、颜色函数、条件分支等完整逻辑。
- 正确：
width: calc(var(--spacing) * 2); - 错误：
width: var(--spacing) * 2;→ 整条声明被浏览器忽略 - Sass中可写
$size: 16px * 1.5;，但CSS变量无法等价实现，只能提前算好存成--spacing-lg -
lighten($c, 10%)这类颜色操作没有CSS变量对应方案，必须预计算并暴露多个变量（如--primary-light）
深色模式切换必须用:root + var()，不能靠Sass多套CSS文件
用户点击切换主题时，毫秒级响应依赖的是变量值注入DOM，而不是加载新样式表。Sass方案需预编译light.css和dark.css，再切换<link>，带来FOUC、缓存失效、transition断裂等问题。
立即学习“前端免费学习笔记（深入）”；
- 正确路径：所有可变值声明为
--bg、--text等，在:root集中管理，JS只改值 - 错误做法：在Vue/React组件的
<style scoped>里写:root { --color: red }→ scoped会加属性选择器，破坏:root匹配，变量不生效 - 组件库（如Ant Design）暴露
--el-color-primary供覆盖，使用者无需重编译；Sass版本必须改源码+重新构建
作用域混乱常源于误用:root与@import混合逻辑
CSS变量按层叠规则继承和覆盖，天然适配组件化；Sass变量靠@import顺序和文件作用域控制，极易污染全局、命名冲突、难以追踪。
-
.card { --shadow: 0 4px 12px rgba(0,0,0,0.15); }→ 仅影响该元素及其后代，子元素自动继承 - Sass中想模拟局部作用域，只能靠
@mixin button($padding)传参，每次调用都复制整段样式代码，bundle体积膨胀 - 在
<style scoped>内定义:root变量是徒劳的；应移至非scoped块，或改用Web Components的:host
真正容易被忽略的点是：CSS变量和Sass变量根本不在同一层——一个活在浏览器渲染引擎里，一个活在构建工具的内存中。混用不是“效果不好”，而是“根本没走通”。选哪个，取决于你要解决的问题：需要JS干预？必须用--var。需要编译期逻辑？只能靠$var。两者不是替代关系，是分工关系。
