sass 无法在编译时解析 var(--color)，因其是浏览器运行时执行的 css 原生函数；#{} 插值要求内部为 sass 表达式，故 #{var(--color)} 报错，正确写法是 #{"var(--color)"} 或先定义字符串变量。
Sass 无法在编译时解析 var(--color)，因为它根本不是 Sass 认识的语法——var() 是浏览器运行时才执行的 CSS 原生函数，Sass 编译器压根不处理它。
为什么直接写 color: var(--color) 不报错，但放进 #{} 就崩
因为 Sass 对声明的处理分两层：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 纯声明（如
color: var(--color);）被原样保留，交给浏览器； - 插值
#{}是 Sass 的“求值通道”，它期待里面是 Sass 表达式（比如变量、函数调用、数学运算），而不是一个待运行时解析的 CSS 函数。 - 当你写
#{var(--color)}，Sass 尝试把它当 Sass 函数var()执行——但它不存在，于是报Invalid CSS after "var": expected expression。
#{} 里安全输出 var(--x) 的唯一方式
必须让插值内容是一个字符串字面量，而不是表达式：
- ✅ 正确：
#{"var(--color)"}或先定义$color: "var(--color)";再用#{$color}； - ❌ 错误：
#{var(--color)}（Sass 找不到var函数）； - ❌ 危险：
#{$color}且$color值为var(--color)（没加引号，Sass 会尝试解析）； - 注意：
calc(100% - #{"var(--gap)"})才合法，漏引号或空格都会导致最终 CSS 无效。
别指望 Sass “读取”或 “计算” CSS 变量
这是根本性限制：Sass 运行在构建阶段，所有变量都已展开为静态值；而 --color 是 DOM 挂载后由浏览器解析的字符串，Sass 看不见、摸不着、更没法参与运算。
- 想动态响应主题切换？得靠 JS 修改
document.documentElement.style.setProperty()； - 想用 Sass 做颜色变体？只能提前算好：
$primary-light: lighten($primary, 10%);，再--primary-light: #{$primary-light};； - 混用时最易忽略的点：CSS 变量兜底逻辑
var(--color, #333)中的#333是纯 CSS 值，Sass 变量$fallback放这儿不会被替换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
