css变量（--color）是浏览器运行时真实存在的属性，可被js实时读写并触发重绘；sass变量（$color）仅在构建阶段作为文本占位符存在，编译后彻底消失，浏览器无法识别或操作。
不能混用，也不能互相替代——CSS变量（--color）是浏览器运行时真实存在的属性，Sass变量（$color）是构建阶段就蒸发的文本占位符。
为什么document.documentElement.style.setProperty('--color', 'red')有效，而setProperty('$color', 'red')报错
CSS变量是浏览器原生支持的自定义属性，声明后进入计算样式树，JS能读、能写、改完立刻重绘；Sass变量只在Sass编译器内部存在，输出的CSS里根本找不到$color这个符号，浏览器连解析都不会尝试，直接抛InvalidPropertyError。
- 常见错误：Vue组件中写
:style="{ '--bg': themeBg }"，但themeBg来自$bg定义 → 绑定的是编译时快照，状态更新毫无反应 - 正确验证方式：
getComputedStyle(document.body).getPropertyValue('--text')能取到值；getComputedStyle(...).getPropertyValue('$text')永远返回空字符串 - IE不支持
--var？加降级：color: #333; color: var(--text-color);，现代浏览器自动覆盖
var(--gap) * 2无效，但calc(var(--gap) * 2)必须加
CSS变量本质是字符串，浏览器不解析其数值含义。所有数学运算必须包裹在calc()中；Sass变量则天然支持单位运算、颜色函数、条件分支等完整逻辑。
- 合法：
width: calc(var(--spacing) * 2); - 非法：
width: var(--spacing) * 2;→ 整条CSS声明被浏览器忽略 - 颜色变浅不能写
lighten(var(--primary), 10%)→ CSS无此语法，只能预设--primary-light这类衍生变量 - 媒体查询断点不能用
@media (min-width: var(--breakpoint-md))→ 必须写死数值，或用$breakpoint-md在Sass中编译
为什么:root { --color: red }在<style scoped></style>里失效
Vue/React的scoped会为:root加上属性选择器（如:root[data-v-xxx]），破坏了:root伪类匹配规则，导致变量无法注入全局作用域。
- 正确做法：把
:root声明放在非scoped的全局CSS文件中，或使用<style></style>不加scoped - 组件库（如Element Plus）暴露
--el-color-primary供覆盖 → 使用者只需改值，无需重编译；Sass版本必须重写_variables.scss并参与构建 - 局部覆盖要靠层叠：
.card { --spacing: 24px; }→ 子元素自动继承，无需额外声明；Sass中模拟局部得靠@mixin传参，每次调用都复制整段样式
真正难处理的是混合场景：比如用Sass预计算lighten($primary, 10%)后注入为--primary-light，再由JS控制开关——这时必须明确区分哪部分交给构建期算，哪部分留给运行时控，边界一旦模糊，就会出现值不变、动画卡顿、深色模式响应延迟等问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
