因为Sass变量仅存在于编译期，:root{--color:$color-primary}会原样输出非法语法，浏览器忽略；必须用--color:#{ $color-primary }插值注入实际值，确保变量已定义且类型合法。
为什么直接写 $color-primary 在 :root 里会报错
因为 Sass 变量只存在于编译阶段，输出 CSS 时已彻底消失。:root { --color: $color-primary } 会被原样输出，浏览器看到的是非法语法 $color-primary，直接忽略该声明，控制台可能报 Invalid CSS after "--color:"。必须用插值把变量的“值”取出来，而不是变量名本身。
正确写法：用 #{} 把 Sass 变量值注入 CSS 变量声明
核心规则：Sass 管定义和计算，CSS 变量管运行时读取。二者不能混用，但可以桥接。
-
:root块内必须用--color-primary: #{ $color-primary };——#{}才能求值并插入真实颜色值（如#007bff） - 确保
$color-primary已提前定义，且非null或未声明；否则#{ $color-primary }会报Invalid null value for `#{}` - 只对基础类型插值安全：颜色、数字、字符串；别对
map、null、函数或未初始化变量做#{} - 建议在导出前加
@debug $color-primary;验证值存在且类型正确
常见错误场景与修复方式
实际项目里最常踩的坑不是语法写错，而是作用域和加载顺序问题。
- 变量在
@use的模块里定义，但没在当前文件@use或@forward—— 导致插值时报未定义 - 多个
@import（尤其旧式写法）顺序错，比如_vars.scss在_root.scss后引入 —— 插值时变量还没加载 - 误把
var(--color)当作 Sass 表达式写进属性值：color: var(--color);是对的，但color: #{ var(--color) };是错的 ——#{}里不能放运行时函数 - 在
@each循环中批量导出 CSS 变量时，键名拼写不一致（比如$theme-map: (primary: #007bff)，却写成#{ map-get($theme-map, primay) }）
需要动态 fallback？var() 必须留在最终 CSS 中
Sass 层无法“模拟” var(--x, #000) 的运行时行为。如果你希望用户可通过 JS 修改 --x 并自动生效，var() 函数必须原样输出到 CSS，不能被 Sass 提前计算掉。
立即学习“前端免费学习笔记（深入）”；
- 错误示范：
color: #{ $color-primary };→ 编译后固定死，JS 改--color-primary完全无效 - 正确组合：
--color-primary: #{ $color-primary };（提供初始值） +color: var(--color-primary);（运行时读取） - 注意：
var(--x, #000)的默认值仅在--x**完全未声明** 或显式设为initial/unset时触发；设成空字符串""或非法值（如123）不会走 fallback
真正容易被忽略的是：插值不是万能胶。它只解决“把 Sass 值塞进 CSS 字符串”的问题，不解决“如何让 CSS 变量可被 JS 修改并实时响应”的问题——后者必须靠 var() 函数本身，且依赖正确的声明位置和继承链。
