Sass编译后对CSS变量“失明”，因其变量仅存于编译期，而CSS变量(--color)是运行时真实属性；二者生命周期分离，Sass无法感知、读取或响应CSS变量的动态变化，仅支持单向插值导出。
不能处理。Sass 本身完全无法感知或响应 CSS 变量的运行时变化——它在构建阶段就完成了所有工作，生成的 CSS 文件里早已没有 $variable，也没有任何监听机制。
为什么 Sass 编译后对 CSS 变量“失明”
Sass 变量只存在于 .scss 文件被解析的那一刻；CSS 自定义属性（--color）是浏览器渲染时才参与计算的真实 CSS 属性。两者生命周期彻底分离：$primary 编译成 #007bff 后就消失了，var(--primary) 的值是否被 JS 修改、是否继承失败、是否 fallback 到默认值，Sass 都无从知晓，也无权干预。
- 你在 JS 里执行
document.documentElement.style.setProperty('--primary', 'red')，Sass 不会重新编译、不会重写 CSS、不会触发任何逻辑 -
@function get-theme() { @return var(--theme); }是非法语法，Sass 不认识var()，更不会把它当表达式求值 - 试图用
@if判断var(--enabled)是否为true—— 编译直接报错：Invalid CSS after "var": expected expression
哪些操作看似“联动”，实则只是静态映射
所谓“Sass 处理 CSS 变量”，本质只有单向输出：把 Sass 的值塞进 CSS 变量声明中，或把 Sass 的值作为 var() 的 fallback。这不是响应式，而是预设。
-
:root { --primary: #{$primary-color}; }→ 把 Sass 值写死到 CSS 变量里，JS 后续改--primary有效，但 Sass 不参与 -
color: var(--text, #{map-get($colors, text)});→ fallback 值由 Sass 提供，但var()的运行时行为（查变量、fallback）完全由浏览器执行 - 用
@each批量生成:root[data-theme="dark"] { --bg: #121212; }→ 这仍是编译期生成多套静态规则，不是运行时计算
真正需要运行时响应时，该怎么做
如果组件样式要随 --color 动态变化（比如根据主题色自动调整 border contrast），Sass 无能为力。必须交由 CSS 或 JS 完成：
立即学习“前端免费学习笔记（深入）”；
- 用
calc()+var()组合实现简单推导：border-color: color-mix(in srgb, var(--primary), black 30%);（需现代浏览器支持） - 用
@property声明受控 CSS 变量，再配合transition实现平滑动画（注意兼容性） - 在 JS 中监听
--color变化（通过MutationObserver监听style属性，或封装 setter），然后手动更新 class 或内联 style - Vue/React 中直接绑定
style="--color: {{ dynamicColor }}"，让框架控制变量注入，Sass 只负责写color: var(--color)
最容易被忽略的是：当你在 Sass 里写了 background: var(--bg);，你以为它“活”了，其实它只是个占位符；它的生命力完全取决于外部 JS 是否设置了 --bg，以及浏览器是否成功解析该变量——Sass 对此既不保证，也不校验。
