SCSS变量不能直接赋给CSS变量，因其分属编译期与运行时两个阶段；必须用#{$var}插值才能将SCSS值注入CSS变量声明，否则会输出无效字符串。
SCSS变量不能直接赋给CSS变量，是因为二者根本不在同一个运行阶段：$color在编译时就被替换成字面值并消失，而--color是浏览器运行时才解析的活属性。不加#{} 插值，Sass会把$color当普通文本输出，生成无效CSS。
为什么$color写进--color里会失效
常见错误写法：:root { --primary: $primary; } —— 这不会报错，但最终CSS里会原样出现--primary: $primary;，浏览器不认识$语法，直接忽略该声明。
根本原因在于：SCSS变量只存在于编译期，Sass引擎看到$primary就立刻展开为#3b82f6；但如果你没用#{} 告诉它“这里要插值”，它就以为你真想写个叫$primary的字符串。
- 错误示例：
$bg: #f9fafb; :root { --bg: $bg; }→ 输出--bg: $bg;（无效） - 正确示例：
$bg: #f9fafb; :root { --bg: #{$bg}; }→ 输出--bg: #f9fafb;（有效） - 插值也支持计算：
$base: 1rem; --fs-m: #{scale($base, 1.25)};（前提是scale()是你定义的函数）
#{} 不是万能的：哪些地方不能用
插值只能用于**属性值位置**，不能塞进选择器、媒体查询条件、或CSS函数内部做运算。尤其注意以下三类典型失败场景：
立即学习“前端免费学习笔记（深入）”；
-
calc()里混用SCSS变量：width: calc($size + 10px);→ Sass会尝试调用内置calc()，但$size未插值，报错或结果异常；应写成width: calc(#{$size} + 10px); -
filter中调用SCSS颜色函数：filter: invert($color);→ Sass的invert()只认颜色值，不认变量名；得改用filter: invert(var(--invert-color));，再由JS控制--invert-color - 在
@each循环外试图读取CSS变量：$x: var(--y);→ 直接语法错误，SCSS根本不允许var()出现在变量赋值右侧
空格和分号这些细节真会影响结果
插值看似简单，但构建工具对格式敏感，尤其旧版Webpack或自定义Sass Loader容易因空白出问题：
- 末尾多一个空格：
--color: #{$c} ;（注意分号前空格）→ 某些版本会把空格连同分号一起吞掉，导致属性值截断 - 插值里嵌套括号没配对：
--shadow: #{drop-shadow(0 2px 4px rgba(0,0,0,0.1)};（少一个右括号）→ Sass报错，中断整个文件编译 - 变量名拼错：
#{$prmiary}→ 编译通过但输出--color: ;，浏览器静默忽略，极难排查
真正麻烦的不是语法本身，而是误以为$和--能自动互通——它们之间没有桥梁，#{} 是唯一合法通道，且必须手动、精准、无多余字符地使用。
