CSS变量是运行时机制，JS可动态修改；Sass变量在编译阶段被替换，JS无法感知。前者支持主题切换、继承与局部作用域，后者支持复杂计算和逻辑判断，但需编译且无运行时灵活性。
CSS变量在运行时能被JavaScript动态修改
这是最根本的区别：CSS自定义属性（--primary-color）是浏览器原生支持的运行时机制，JS可以直接读写style.setProperty()或getComputedStyle()。Sass变量（如$color-primary）在编译阶段就被替换成具体值，输出后就不存在了，JS完全感知不到。
典型场景包括主题切换、用户偏好适配、动画参数控制——这些必须用CSS变量。比如深色模式切换只需：
document.documentElement.style.setProperty('--bg', '#121212');而Sass变量做不到这点，强行用它实现主题就得编译多份CSS文件，维护成本陡增。
Sass变量支持复杂计算和类型检查
CSS变量本质是字符串，所有值都得靠var(--size)拼接，不支持直接运算；Sass变量是预处理器层面的“真变量”，能做颜色混合、列表遍历、条件判断：
立即学习“前端免费学习笔记（深入）”；
$base-font-size: 16px;<br>$h1-size: $base-font-size * 2.5;
常见踩坑点：
- CSS变量里写
calc(var(--gap) * 2)可行，但var(--gap) * 2会直接报错（缺少calc()包裹） - Sass中
lighten($color, 10%)返回新颜色，CSS里没等价语法，只能提前算好存成多个变量 - Sass支持
@if逻辑分支，CSS变量无法做条件赋值
作用域和继承行为完全不同
CSS变量遵循CSS级联规则，可以被继承、被覆盖，天然适配组件化开发：
.card { --shadow: 0 2px 4px rgba(0,0,0,0.1); }<br>.card--elevated { --shadow: 0 4px 12px rgba(0,0,0,0.15); }Sass变量是静态作用域，声明即生效，没有“父组件传参”概念。想模拟作用域得靠@mixin + 参数，但每次调用都是复制一份样式代码，体积更大。
关键差异：
- CSS变量可被
:root定义，全局可用；也可在任意选择器内重定义，局部生效 - Sass变量一旦
@import就全局可见，容易命名冲突，需靠命名空间前缀（如$button-padding）硬规避 - 组件库若用CSS变量，使用者能直接覆盖
--button-bg；用Sass变量则必须重新编译源码
构建流程与兼容性取舍
纯CSS变量无需构建工具，现代浏览器（Chrome 49+/Firefox 31+/Safari 9.1+）全支持，IE完全不支持；Sass必须走编译流程，但输出的是标准CSS，兼容性取决于你设的target（比如是否转译rem或flex）。
实际项目建议：
- 基础设计Token（颜色、间距、圆角）用CSS变量，方便 runtime 调整和主题切换
- 需要逻辑处理的值（如根据断点生成多套字体大小、按状态生成按钮边框样式）用Sass变量或
@mixin - 老项目要兼容IE？Sass是唯一选择；新项目优先CSS变量，必要时用PostCSS插件补漏（如
postcss-custom-properties）
真正难的是混合使用时的边界划分——比如--button-padding该不该由$button-padding-base生成？这取决于团队对“谁负责最终值”的约定，而不是技术本身能自动解决的。
