css变量（--color）是浏览器运行时可读写的原生特性，sass变量（$color）是编译期消失的预处理器占位符；二者作用域、功能、构建流程完全不同，混用将导致样式失效、动态控制失败。
CSS原生变量（--color）和Sass变量（$color）根本不是同一类东西——一个活在浏览器里，一个活在编译器里。混用或互换会直接导致样式不生效、JS无法控制、主题切换失败。
运行时可读写 vs 编译期即消失
CSS变量是浏览器原生支持的属性，声明后真实存在于DOM的计算样式中；Sass变量只是预处理器内部的占位符，编译完就彻底没了，输出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变量不可单独使用 - Sass编译产物是标准CSS，兼容性可控，但多一套工具链意味着更多维护成本和潜在故障点
- 组件库暴露
--el-color-primary供使用者覆盖，比要求用户重写_variables.scss并重新编译友好得多
真正容易被忽略的是：你在:root里写$color: red不会报错，但也不会起效——Sass根本不解析这个上下文；而把--color写在SCSS文件里，它又不会被Sass处理，只是原样透出到CSS中。阶段错位，是绝大多数“变量不生效”问题的根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
