Sass编译器无法识别var(--x)，因其运行在构建阶段，而var()是浏览器运行时解析的CSS语法；$color: var(--color)仅作字符串存储，参与计算即报错；正确做法是用#{$var}将Sass变量注入CSS变量声明。
为什么 Sass 编译器根本“看不到” var(--x)
Sass 运行在构建阶段（Webpack 启动、sass-loader 执行时），此时 HTML 尚未加载，DOM 不存在，document.documentElement 是 undefined，浏览器的 CSS 解析引擎也完全没启动。而 var(--x) 是浏览器在样式计算阶段才解析的运行时语法，Sass 编译器连这个 token 都不识别——它不是 Sass 函数，也不是合法的 Sass 值，直接报 Unrecognized input。
写 $color: var(--color) 会发生什么
这种写法能通过编译，但只是把字符串 "var(--color)" 当作字面量存下来。后续一旦参与 Sass 计算，就会立刻出问题：
-
background: darken($color, 10%)→ 报错：Sassdarken()只接受编译期确定的颜色值，无法处理字符串 -
width: calc($w / 2)→ 若$w是var(--w)，结果变成calc(var(--w) / 2)，CSS 语法非法，浏览器静默忽略 -
@if $color == #3b82f6→ 永远为 false，因为$color是字符串，不是颜色值
想让 Sass 和 CSS 变量协作，只能靠插值注入
真正可行的路径，是用 Sass 变量定义源值，再通过 #{$var} 显式注入到 CSS 变量声明中：
$primary: #3b82f6;
:root {
--primary-color: #{$primary};
}
注意三点：
立即学习“前端免费学习笔记（深入）”；
- 必须用
#{$primary}，写成--primary-color: $primary会原样输出，浏览器报无效属性 - 注入只发生在编译期，生成的是固定值；运行时 JS 修改
--primary-color完全不影响 Sass 逻辑 - 若需动态响应，所有样式引用必须走
var(--primary-color)，不能回退到 Sass 变量
容易被忽略的关键断层：时间维度错配
很多人试图用 @function 包裹 var()，或在 @media (prefers-color-scheme: dark) 里切换 Sass 变量——这些都失败，因为 @function 和 @media 都在编译期执行，而 prefers-color-scheme 是运行时媒体查询，var() 的取值也是运行时行为。两者根本不在同一个时间线上，强行桥接只会产出无效 CSS 或静默失效。真正需要动态的地方，得交给 CSS 变量 + calc() + JS 控制 data-theme。
