#{$var}插值会使var(--x, fallback)失效，因插值后css变量被视为已声明（即使值为空或null），导致回退机制不触发；!default仅作用于sass编译期，无法修复运行时css变量声明污染问题。
为什么#{$var}会让var(--x, fallback)失效
插值把 Sass 变量变成字符串塞进 CSS，但var()的回退机制只在变量未定义时触发；一旦你用#{$var}强行注入一个值（哪怕为空），CSS 就认为--x已被声明，回退值永远不生效。
典型现象：你在:root里写--gap: #{$gap};，而$gap是空值或null，结果var(--gap, 1rem)取到的是空字符串""，不是1rem。浏览器看到的是--gap: ;（语法错误）或--gap: ""（已声明），回退逻辑被绕过。
-
$gap: null→--gap: #{$gap}编译为--gap: ;，整条自定义属性被忽略，var(--gap, 1rem)取不到任何值，退到初始值（如font-size退为16px） -
$gap: ""→ 编译为--gap: ""，var(--gap, 1rem)返回空字符串，样式崩坏（例如margin: ""无效） -
$gap: 20px→ 编译为--gap: 20px，var(--gap, 1rem)能取到20px，但回退值彻底闲置
!default不能挽救插值后的回退逻辑
!default只影响 Sass 编译期变量赋值，对插值后生成的 CSS 自定义属性毫无作用。它解决不了“--gap已被声明但值为空”这个运行时问题。
你写$gap: 20px !default;再--gap: #{$gap};，只是确保$gap有值；但如果上层覆盖了$gap: ""，插值依然输出空字符串，var()回退还是失效。
-
!default生效前提是变量未被提前赋值——它不干预插值结果，也不修复 CSS 层面的声明污染 - 想靠
!default让--gap有默认值？不行。CSS 自定义属性没有!default语义，必须靠var(--gap, 1rem)显式兜底 - 真正要保护的是
var()调用端，而不是插值源头。别在:root里盲目插值，除非你确定$gap始终有效且带单位
安全插值的三个硬性条件
如果必须用#{$var}注入 CSS 变量，得同时满足三件事，否则回退机制大概率被破坏：
-
$var不能为null或空字符串——编译前加@if not $var { @error "Missing required variable"; }拦截 -
$var必须含单位（如20px、1.2em），裸数字（20）插值后导致--gap: 20，var(--gap, 1rem)因类型不匹配失败 - 插值位置不能替代
var()——例如width: #{$width};没问题，但width: var(--width, #{$fallback});非法，var()第二个参数不允许表达式
更稳妥的做法是：CSS 变量本身不插值，只用var(--width, 100%)；Sass 变量仅用于生成静态规则（如.btn { padding: $gap; }），两者职责分离。
Vue/Vite 中additionalData插值的特殊风险
通过 Vite 的css.preprocessorOptions.scss.additionalData注入@use和插值，容易放大问题：一次注入失败，所有组件的var()回退都失效。
常见翻车点：
-
additionalData: `@use "@/styles/vars.scss" as *; :root { --gap: #{$gap}; }`——如果vars.scss里$gap未定义或为空，整个:root块可能编译异常，或静默输出无效--gap - 路径别名
@/未正确注册，@use失败，$gap为undefined，插值后--gap: ;，后续所有var(--gap, ...)全挂 - IDE 自动删分号，
--gap: #{$gap}变成--gap: #{$gap}body { ... }，Sass 把body当变量值的一部分，编译直接中断
真正该做的，是在 JS 层或构建脚本中校验$gap有效性，而不是依赖 CSS 运行时兜底。回退值不是保险丝，是最后一道手动闸门——它只在你没插值、也没声明时才起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
