css变量（--primary-color）应优先于sass变量（$primary-color），因其支持运行时动态控制、js读写、组件化作用域及零编译开销；sass仅适用于编译期计算与条件逻辑。
现代开发中，--primary-color 这类原生CSS变量应优先于 $primary-color，除非你明确需要编译期计算或条件逻辑——因为运行时动态样式控制这件事，Sass根本做不到。
JS能直接读写--color，但对$color完全无感
CSS变量是浏览器原生支持的自定义属性，JS通过 element.style.setProperty() 或 document.documentElement.style.setProperty() 修改后，所有引用 var(--color) 的元素立刻重绘；而Sass变量在编译阶段就被替换成硬编码值（比如 #4285f4），输出后的CSS里根本不存在 $color 这个符号。
- 常见错误现象：Vue组件里写
:style="{ '--bg': themeBg }"，但主题色用的是Sass变量——结果状态变了，颜色纹丝不动 - 深色模式切换必须走
document.documentElement.style.setProperty('--bg', '#121212')，不是重新加载CSS文件 - 想用
getComputedStyle(document.body).getPropertyValue('--text')拿当前值？Sass没这个API
var(--gap) * 2 会报错，但 calc(var(--gap) * 2) 可行
CSS变量本质是字符串，不能直接参与运算；所有数学操作必须包裹在 calc() 内。Sass变量则天然支持加减乘除、颜色函数（lighten($c, 10%)）、条件判断（@if）。
- 正确写法：
width: calc(var(--spacing) * 2); - 错误写法：
width: var(--spacing) * 2;→ 浏览器直接忽略整条声明 - Sass里可写
$size: 16px * 1.5;，但CSS变量无法等价实现，只能提前算好存成--spacing-lg - 过渡动画依赖变量值变化：
transition: background-color 0.3s;对var(--bg)有效，对Sass生成的静态值无效（它不会“变”，只是被替换）
:root 定义全局，选择器内重定义即局部生效
CSS变量作用域由CSS层叠规则决定，天然适配组件化场景；Sass变量作用域靠文件导入和嵌套层级控制，容易失控且不支持“父传子”语义。
-
:root { --border-radius: 6px; }全局可用；.card { --border-radius: 12px; }仅影响该元素及其后代 - Vue/React组件中若在
<style scoped></style>里写:root { --color: red }→ 不生效（scoped会加属性选择器，破坏:root匹配） - Sass模拟局部变量得靠
@mixin button($padding: 12px) { padding: $padding; }，每次调用都复制样式代码，体积膨胀 - 组件库（如Ant Design）暴露
--el-color-primary供用户覆盖，Sass版本必须改源码+重编译
打包后体积与维护成本差异极大
CSS变量保留在最终CSS中，零编译开销；Sass变量全部展开为具体值，多主题方案需生成多份CSS文件，带来体积冗余和缓存失效风险。
- 单CSS文件 + JS切换变量值：深色模式切换无网络请求、无FOUC、支持渐变过渡
- Sass多主题方案：需构建
light.css和dark.css，切换时要动态换<link>标签，有加载延迟 - CI/CD流程中，Sass变量修改需触发完整样式编译；CSS变量修改只需部署JS逻辑
- 调试时查元素computed styles，能看到实时生效的
--color值；Sass变量只留下一堆静态值，无法溯源
真正难的不是“怎么写”，而是分清哪些需求必须用CSS变量（比如用户实时调节字号、无障碍对比度开关、A/B测试样式分流），哪些仍得靠Sass完成（比如遍历颜色列表生成调色板、根据断点自动缩放字体）。混用时尤其注意：不要在Sass里试图 @include 一个依赖 var(--x) 的函数——它编译时还不存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
