CSS变量（--color）是浏览器运行时机制，可被JS动态读写并实时重绘；Sass变量（$color）是编译期占位符，编译后消失，仅剩硬编码值，二者本质不同、不可混用。
因为 SCSS 变量（$color）在构建后就消失，而 CSS 变量（--color）能被 JS 实时修改并触发重绘——这不是“优先考虑”，而是“该用哪儿用哪儿”。混用或误替会导致主题切换卡死、状态变化无响应、调试时 getComputedStyle() 拿不到值。
JS 修改无效：你改的不是浏览器认识的东西
常见错误现象：document.documentElement.style.setProperty('$primary-color', 'red') 报错；getComputedStyle(document.body).getPropertyValue('$primary-color') 返回空字符串。
-
$primary-color不是合法 CSS 属性名，浏览器直接忽略，根本不会进入 CSSOM - SCSS 编译后，所有
$primary-color都被替换成硬编码值（如#4285f4），最终 CSS 文件里搜不到$字符 - Vue/React 中写
:style="{ '--bg': themeBg }"却底层用$bg初始化 → 值永远卡在构建那一刻
var() 不能直接运算：calc() 是唯一合法出口
width: var(--gap) * 2 整条声明会被浏览器丢弃；width: calc(var(--gap) * 2) 才生效。
-
var(--gap)返回的是字符串（如"12px"），不是数值，浏览器不解析其单位或类型 - Sass 中
$gap: 16px; width: $gap * 1.5;能直接算出24px，但 CSS 变量没有等价语法 - 颜色调整（如
lighten($c, 10%)）必须提前算好，存成多个变量：--primary-light、--primary-dark
:root 和 scoped 样式块冲突：变量定义位置直接影响是否生效
在 Vue 的 <style scoped> 里写 :root { --color: red }，变量不会生效。
立即学习“前端免费学习笔记（深入）”；
-
:root是全局选择器，scoped会为它加上属性选择器（如:root[data-v-xxx]），破坏匹配 - 正确做法：把全局变量放到非
scoped的样式块中，或直接写在index.html的<style>里 - 局部覆盖应直接在选择器内重定义：
.card { --bg: #f5f5f5; }，子元素自动继承，无需额外声明
真正容易被忽略的是边界场景：比如你以为在组件里定义了 --theme 就能响应状态，结果发现父组件没传、scoped 拦截了、或者 IE 里整个失效。CSS 变量不是“更高级的 Sass 变量”，它是另一套运行机制——用错地方，比不用还麻烦。
