css变量（--color）是浏览器运行时真实存在的属性，sass变量（$color）仅在构建阶段存在并被替换为静态值，二者生命周期完全分离；--color: $color会输出无效声明，必须用#{$color}插值；js可读写--color但对$color完全无感。
因为它们根本不在同一个时间线上：CSS变量是浏览器运行时真实存在的属性，Sass变量是构建阶段就蒸发掉的文本占位符。想让$color直接变成--color，就像试图用昨天的菜谱控制今天的炉火——语法不通，时机不对。
为什么--color: $color会生成无效CSS
Sass看到--color: $color，不会自动展开变量，而是把$color当普通字符串原样输出。结果就是--color: $color;，浏览器不认识$开头的属性名，整条声明被静默丢弃。
- 正确写法必须显式插值：
--color: #{$color}; - 插值只在编译期生效，生成的是固定值，不是“绑定”
- 如果
$color来自@use命名空间（如theme.$primary），#{theme.$primary}会报错——Sass插值不支持点号访问
为什么JS读不到$color，但能改--color
document.documentElement.style.setProperty('--color', 'red')能立刻重绘，是因为--color是CSSOM里真实存在的自定义属性；而setProperty('$color', 'red')直接抛InvalidPropertyError，浏览器压根没注册过这个属性名。
-
getComputedStyle(document.documentElement).getPropertyValue('--color')返回当前值 -
getComputedStyle(...).getPropertyValue('$color')返回空字符串（不是undefined） - Vue中
:style="{ '--bg': themeBg }"若themeBg来自Sass变量，那它只是个编译快照，状态更新后颜色纹丝不动
为什么calc(var(--gap) * 2)合法，但lighten($c, 10%)没法在CSS里等价实现
CSS变量本质是字符串，所有运算必须靠calc()兜底；Sass变量是预处理器层面的“真变量”，能调用颜色函数、条件分支、循环生成断点。
-
width: calc(var(--gap) * 2);✅ 浏览器运行时计算 -
width: var(--gap) * 2;❌ 整条CSS声明被忽略 -
lighten($primary, 10%)只能提前算好存成--primary-light，CSS里没有对应语法 -
@if $theme == 'dark'这种逻辑，CSS变量完全无法模拟，必须靠JS或媒体查询配合
真正容易被忽略的是：你以为在“覆盖变量”，其实是在和两个不同生命周期打架——Sass变量只活在你保存.scss到输出.css这几十毫秒之间；而CSS变量从页面加载开始，一直活到用户关闭标签页。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
