CSS自定义属性（--color）可被JavaScript实时修改并触发重绘，Sass变量（$color）编译后固化为静态值、运行时不可干预；前者依赖浏览器原生支持与calc()运算，后者支持编译期算术与逻辑但无运行时能力。
CSS自定义属性（--color）能被 JavaScript 实时修改并触发重绘，Sass变量（$color）编译后就固化成静态值，运行时完全不可干预——这不是“更好用”，而是“能不能做”。
JS 修改 --primary-color 立刻生效，改 $primary-color 根本没反应
浏览器原生支持 --xxx 作为可读写属性，调用 document.documentElement.style.setProperty('--primary-color', '#ff6b6b') 后，所有 background-color: var(--primary-color) 的元素会在下一帧重绘；而 $primary-color 在 Sass 编译阶段就被替换成 #4285f4，输出的 CSS 文件里根本不存在这个符号，JS 查不到、设不了、也触发不了任何样式变化。
- 常见错误现象：Vue 组件中写
:style="{ '--bg': themeBg }"，但主题色底层用的是$bg——状态变了，颜色纹丝不动 - 深色模式切换必须走
document.documentElement.style.setProperty('--bg', '#121212')，不是换<link>标签 - 想用
getComputedStyle(document.body).getPropertyValue('--text')拿当前值？$text没这个 API
var(--gap) 不能直接参与运算，但 calc(var(--gap) * 2) 可行
CSS 变量本质是字符串，浏览器不解析其数值含义；所有数学操作必须包裹在 calc() 内。Sass 变量则天然支持算术、颜色函数和条件逻辑，比如 $size: 16px * 1.5 或 @if $debug { ... }。
- 正确写法：
width: calc(var(--spacing) * 2); - 错误写法：
width: var(--spacing) * 2;→ 整条声明被浏览器忽略 - Sass 中可写
$size-lg: $size-md * 1.5，但 CSS 变量无法等价实现，只能提前算好存成--spacing-lg - 过渡动画依赖值变化：
transition: background-color 0.3s对var(--bg)有效，对 Sass 输出的硬编码值无效
:root 定义全局，选择器内重定义即局部生效
CSS 变量作用域由层叠规则决定，天然适配组件化场景；Sass 变量靠文件导入顺序和嵌套层级控制，容易失控且不支持“父传子”语义。
立即学习“前端免费学习笔记（深入）”；
-
--spacing-md在某个.card上设为16px，其子元素自动继承，无需额外声明 - Sass 中若在 mixin 里用
$spacing-md，必须显式传参或依赖全局定义，跨文件易冲突 - 主流组件库（如 Element Plus）暴露
--el-color-primary作为定制入口；Sass 版本则必须重写整个_variables.scss并参与构建流程 - 媒体查询中动态更新值：
@media (prefers-color-scheme: dark) { :root { --text: #eee; } }可行；Sass 无法在运行时响应系统偏好
真正复杂的地方在于混合使用场景：有人把 Sass 当“编译期计算器”，又把 CSS 变量当“运行时开关”，结果在 calc(var(--gap) + $base-padding) 这类写法里卡住——var() 和 $ 不互通，也不能混入同一表达式。要么全用 CSS 变量+提前计算，要么 Sass 只管生成静态值，别试图让它“活”起来。
