css变量（--color）是浏览器运行时原生机制，可被js动态读写并实时重绘；sass变量（$color）是编译期占位符，编译后消失，仅剩硬编码值，二者本质不同、不可混用。
CSS变量（--color）和Sass变量（$color）根本不是同一类东西——一个活在浏览器里，一个活在编译器里。混用或互换会直接导致样式不生效、JS无法控制、主题切换失败。
为什么document.documentElement.style.setProperty('--bg', '#121212')立刻生效，而setProperty('$bg', ...)完全无效
CSS变量是浏览器原生支持的运行时机制，声明后真实存在于计算样式中；Sass变量只是预处理器内部占位符，编译完就彻底消失，输出CSS里连$bg的影子都找不到。
-
--primary-color可被getComputedStyle()读取、被transition响应、被媒体查询覆盖 -
$primary-color只在.scss文件里存在，编译后只剩color: #4285f4这样的硬编码值 - 常见错误：Vue组件里写
:style="{ '--theme': themeColor }"，但themeColor却从$theme-color初始化 → 值永远是编译那一刻的快照，状态变化毫无反应
var(--gap) * 2报错，但$gap * 2能直接算出32px，这是为什么
CSS变量本质是字符串，所有数学运算必须显式包裹在calc()里；Sass变量是预处理器层面的“真变量”，支持类型识别、颜色函数、条件分支等完整逻辑。
-
width: calc(var(--gap) * 2)✅ 合法；width: var(--gap) * 2❌ 浏览器解析失败 -
lighten($primary, 10%)✅ 编译时生成新颜色；CSS里没等价语法，只能提前算好存成--primary-light等多个变量 -
@if $theme == 'dark' { ... }✅ Sass编译时分支；CSS变量无法做条件赋值，深色模式必须靠JS或@media (prefers-color-scheme: dark)配合
:root { --gap: 12px } vs $gap: 12px：作用域机制完全不同
CSS变量遵循CSS层叠规则，天然支持“父设子用、局部覆盖”；Sass变量靠@import顺序和文件作用域决定可见性，没有继承概念，也不能被选择器动态影响。
-
.card { --gap: 24px; }→ 卡片内var(--gap)取24px，子元素默认继承 -
$gap: 12px写在_vars.scss，被多个文件@import后就全局污染，改一个地方可能意外影响其他组件 - 想模拟局部作用域？Sass只能靠
@mixin传参，但每次调用都复制整段样式代码，体积膨胀；CSS变量天然适配组件库定制入口（如--el-color-primary）
真正难处理的是边界场景：比如在<style scoped></style>里写:root { --color: red }——该变量不会生效，因为:root是全局根节点，scoped会加属性选择器导致匹配失败；又比如IE11完全不支持--var，若项目仍需兼容它，CSS变量就不能单独使用。这些细节比“哪个更好用”更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
