CSS变量与Sass变量有什么区别？

CSS变量与Sass变量本质不同：前者是浏览器运行时可读写的自定义属性，支持级联继承、JS控制和主题切换；后者是编译期消失的预处理器占位符，仅用于静态计算和逻辑处理，二者不可混用或互换。

CSS变量（--color）和Sass变量（$color）根本不是同一类东西，混用或互换会直接导致样式失效、JS无法控制、主题切换失败。

运行时可读写 vs 编译期即消失

CSS变量是浏览器原生支持的自定义属性，真实存在于DOM计算样式中；Sass变量只是预处理器内部占位符，编译完就彻底从CSS里蒸发了。

1. document.documentElement.style.setProperty('--primary', '#3a86ff') 执行后，所有 color: var(--primary) 立即重绘
2. document.documentElement.style.setProperty('$primary', '#3a86ff') 直接报错：InvalidPropertyError，浏览器根本不认识 $ 语法
3. Vue/React中写 :style="{ '--bg': themeBg }" 却用 $bg 定义 themeBg → 值永远是编译时快照，状态变化无响应

作用域机制完全不同：级联继承 vs 静态导入

CSS变量按CSS层叠规则生效，天然支持“父设子用、局部覆盖”；Sass变量靠@import顺序和文件作用域决定可见性，没有继承概念。

1. :root { --gap: 12px; } + .card { --gap: 24px; } → 卡片内及其子元素自动取 24px
2. $gap: 12px 写在 _vars.scss，被10个组件 @import 后，改一处可能让按钮、表单、弹窗全乱套
3. Sass想模拟局部作用域只能靠 @mixin 传参，但每次调用都复制整段CSS，体积膨胀且无法复用已计算值

功能边界清晰：calc()可用 vs 运算必须提前算

CSS变量本质是字符串，所有数学运算必须包裹在 calc() 中；Sass变量是预处理器层面的“真变量”，支持颜色函数、条件判断、循环等完整逻辑。

1. ✅ 合法：width: calc(var(--spacing) * 2);　❌ 失效：width: var(--spacing) * 2;（整条声明被浏览器忽略）
2. lighten($primary, 10%) ✅ Sass直接生成新色值；CSS里没等价语法，只能提前算好存成 --primary-light
3. @if $theme == 'dark' { ... } ✅ Sass编译时分支；CSS变量无法做条件赋值，深色模式必须靠JS或 @media (prefers-color-scheme: dark)

构建与兼容性：零构建 vs 必须编译

纯CSS变量无需任何构建步骤，现代浏览器（Chrome 49+/Firefox 31+/Safari 9.1+）全支持；Sass必须走编译流程，且输出兼容性取决于你配置的target。

1. IE11及更老浏览器完全不支持 --var，必须用PostCSS插件降级，或加fallback：color: #333; color: var(--text-color);
2. Sass编译产物是标准CSS，兼容性可控，但多一套工具链意味着更多维护成本和潜在故障
3. 组件库（如Element Plus）暴露 --el-color-primary 供覆盖，使用者无需重编译；Sass版本必须改源码+重新构建

真正容易被忽略的是：CSS变量不能替代Sass变量，反之亦然。该用 $breakpoint-md 定义断点，就别硬塞进 --breakpoint-md；该用 --theme-bg 做JS驱动的主题切换，就别指望 $theme-bg 能动态响应。