CSS变量与Sass变量本质不同：前者是浏览器运行时可读写的原生属性，后者是编译期即消失的预处理器占位符；混用会导致样式失效、JS无法控制及主题切换失败。
CSS变量和Sass变量根本不是同一类东西——一个活在浏览器里，一个活在编译器里。混用或互换会直接导致样式不生效、JS无法控制、主题切换失败。
运行时可读写 vs 编译期即消失
CSS变量（--color）是浏览器原生支持的属性，声明后真实存在于DOM的计算样式中；Sass变量（$color）只是预处理器内部的占位符，编译完就彻底没了，输出CSS里连$color的影子都找不到。
-
document.documentElement.style.setProperty('--primary-color', '#ff6b6b')立刻生效，所有var(--primary-color)自动重绘 -
document.documentElement.style.setProperty('$primary-color', '')完全无效——浏览器根本不认识$语法 - 常见错误：Vue模板里写
:style="{ '--bg': theme.bg }却用$bg定义主题色 → 值始终是编译时的死值，状态变化毫无反应
作用域机制完全不同：级联继承 vs 静态导入
CSS变量遵循CSS层叠规则，天然支持“父设子用、局部覆盖”；Sass变量靠@import顺序和文件作用域决定可见性，没有继承概念，更不能被选择器动态影响。
-
:root { --gap: 12px; }+.card { --gap: 24px; }→ 卡片内var(--gap)取24px，子元素默认继承 - Sass中
$gap: 12px写在_vars.scss，被多个文件@import后就全局污染，改一个地方可能意外影响其他组件 - 想模拟局部作用域？Sass只能靠
@mixin传参，但每次调用都复制整段样式代码，体积膨胀
功能边界清晰：calc()可用 vs 运算必须提前算
CSS变量值本质是字符串，所有数学运算必须包裹在calc()里；Sass变量是预处理器层面的“真变量”，支持颜色函数、条件判断、循环等完整逻辑。
立即学习“前端免费学习笔记（深入）”；
-
width: calc(var(--base-size) * 2)✅ 合法 -
width: var(--base-size) * 2❌ 浏览器报错 -
lighten($primary, 10%)✅ Sass直接生成新颜色；CSS里没等价语法，只能提前算好存成--primary-light等多个变量 -
@if $theme == 'dark' { }✅ Sass编译时分支；CSS变量无法做条件赋值，深色模式切换必须靠JS或媒体查询配合
构建与兼容性：零构建 vs 必须编译
纯CSS变量无需任何构建步骤，现代浏览器（Chrome 49+/Firefox 31+/Safari 9.1+）全支持；Sass必须走编译流程，且输出结果的兼容性取决于你配置的target（比如是否转译rem或flex）。
- IE完全不支持
--var，若项目需兼容IE，CSS变量不可单独使用 - Vue/React的
<style scoped>里写:root { --color: red }→ scoped会加属性选择器（如:root[data-v-xxx]），破坏:root匹配，变量不生效 - 组件库（如Element Plus）暴露
--el-color-primary作为定制入口；Sass版本必须重写_variables.scss并参与构建流程
真正复杂的地方在于混合使用场景：比如用Sass预计算lighten($primary, 10%)后注入为--primary-light，再由JS驱动切换——这时候你既需要Sass的静态能力，又依赖CSS变量的运行时能力，稍不留神就会让var()取到空值或字符串拼接错误。
