Sass 编译时无法解析 CSS 变量 var(--color)，因其是浏览器运行时特性；直接使用 color: var(--color) 无误，但放入 #{} 插值需加引号如 "var(--color)"，否则 Sass 误判为函数调用而报错。
为什么 var(--color) 直接写在 Sass 里会报错
Sass 在编译阶段就处理所有语法，而 var(--color) 是浏览器运行时才解析的原生 CSS 变量调用。如果你直接写 color: var(--color);，Sass 会把它当普通声明处理——这本身没问题；但一旦你试图把 var(--color) 塞进需要 Sass 计算或拼接的地方（比如 calc() 里、属性值插值中、或作为 mixin 参数），Sass 就可能提前尝试解析它，导致 Invalid CSS after "var": expected expression 这类错误。
根本原因不是 var() 不能用，而是 Sass 把它当成了函数调用，而它根本不是 Sass 函数。
- ✅ 正确：直接写死在声明中，Sass 不干预 →
color: var(--primary); - ❌ 错误：放进
#{}却没加引号 →width: calc(100% - #{var(--gap)});（Sass 会尝试执行var） - ⚠️ 危险：用
#{}拼接但漏掉单引号 →background: #{$theme-color};若$theme-color是字符串var(--bg)，不加引号就会被解析
#{} 里怎么安全输出 var(--x)
插值 #{} 的作用是“把 Sass 表达式求值后转成纯 CSS 字符串”。要让它原样输出 var(--x)，关键就是：**让插值内容本身是一个字符串字面量，而不是一个待执行的表达式**。
- 必须用引号包裹整个
var()调用：写成"var(--color)"，再放进#{} - 不能写成
#{var(--color)}（Sass 以为你在调用函数var） - 也不能写成
#{--color}（语法非法）
示例：
$gap: "var(--gap)";
.element {
padding: #{$gap}; // 输出：padding: var(--gap);
width: calc(100% - #{$gap}); // 输出：width: calc(100% - var(--gap));
}
注意：$gap 是字符串变量，不是颜色或数字，所以不能参与 Sass 数学运算（比如 $gap + 4px 会报错）。
和 css-vars 混用时的常见坑
当你用 :root { --primary: #3498db; } 定义变量，又想在 Sass 中复用这些值做编译期逻辑（比如深色模式条件判断），不能指望 var(--primary) 返回颜色值——它永远只是字符串。
- ❌ 错误假设：
$sass-color: var(--primary);→$sass-color不是#3498db，而是字符串"var(--primary)"，无法用于lighten($sass-color, 10%) - ✅ 正确做法：维护一份 Sass 变量映射，或用
postcss-css-variables等插件在构建后期替换（但那就不是纯 Sass 编译了） - ⚠️ 特别注意：
#{}插值发生在编译期，而var()解析发生在运行期，两者生命周期完全隔离，不存在“传参”或“取值”关系
要不要用 #{} 其实取决于你真正在做什么
多数情况下，你根本不需要 #{} 来输出 var()。直接写更清晰、更安全。
- 仅当你要动态拼接属性值时才需插值：比如生成多个主题类名
.theme-#{$name} { color: #{"var(--" + $name + "-color)"}; } - 若只是静态引用，
color: var(--text);更直观，也避免引号/拼接出错 - 复杂拼接建议封装成函数：
@function css-var($name) { @return "var(--#{$name})"; }，然后用#{css-var("color")}
最常被忽略的一点：CSS 变量本身支持 fallback，比如 var(--color, blue)，这个 fallback 是浏览器行为，Sass 完全不感知——所以你在 Sass 里写的任何 fallback 都不会生效，必须写在 CSS 的 var() 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
