SCSS中var()的回退值必须显式写出，如var(--x, #{$fallback})，因SCSS不解析var()、不自动生成fallback，且空字符串不触发回退。
SCSS里不能直接用var()生成回退值，得靠编译时逻辑
SCSS本身不解析var()函数，更不会在编译时自动补 fallback。你写color: var(--text, #333)，它就原样输出——浏览器运行时才决定用哪个。所以“优雅处理”不是靠 SCSS 语法糖，而是靠结构设计和预处理器能力。
常见错误是以为@function能动态生成var()回退链，结果发现编译后还是静态字符串，没解决 IE 或变量未定义的问题。
- SCSS 变量（如
$primary: #007bff）和 CSS 自定义属性（--primary）完全隔离，不能互相赋值 - 想让
--size有默认值，不能写--size: $base-size再指望它自动 fallback；必须显式写出var(--size, #{$base-size}) - 如果项目要支持 IE11，所有
var()调用都必须带第二个参数，且该参数只能是字面量或 SCSS 变量插值（#{$fallback}），不能是嵌套var()
var(--x, #{$fallback})是唯一安全的 SCSS 插值写法
这是最常用也最可控的方式：把 fallback 值存在 SCSS 变量里，再用插值注入到var()的第二参数中。它保证编译后是合法 CSS，且 fallback 值可复用、可集中管理。
例如定义字号系统：
立即学习“前端免费学习笔记（深入）”；
/* _variables.scss */
$font-base: 16px;
$font-h1: calc(#{$font-base} * 2);
$font-h2: calc(#{$font-base} * 1.5);
<p>/<em> _typography.scss </em>/
h1 {
font-size: var(--font-h1, #{$font-h1});
}
h2 {
font-size: var(--font-h2, #{$font-h2});
}注意：calc()必须在 SCSS 层展开，不能写成var(--font-h1, calc(var(--font-base) * 2))——后者在 IE 里无效，且现代浏览器也不允许第二参数含未解析的var()。
- 避免在
var()第二参数里写#{map-get($sizes, h1)}这类复杂表达式，容易出错且不可读 - 如果 fallback 需要响应式（比如
1.25rem在移动端变1rem），别硬塞进第二参数；改用@supports+ 媒体查询分层控制 - 所有插值值必须是合法 CSS 字符串，比如
#{quote($color)}对颜色无意义，直接#{$color}即可
用@mixin封装高频回退模式，但别过度抽象
当多个组件都要用--bg、--text、--border三件套时，一个@mixin theme-vars比重复写三行var()更清晰。但它只负责“写出来”，不负责“是否生效”。
示例：
@mixin themable-colors($bg: #fff, $text: #333, $border: #ddd) {
background-color: var(--bg, #{$bg});
color: var(--text, #{$text});
border-color: var(--border, #{$border});
}
<p>.card {
@include themable-colors(#f9f9f9, #222, #ccc);
}这种写法的问题在于：一旦用户在 JS 里设了--bg: transparent，但没设--text，那color还是会走#222 fallback——这未必是你想要的“主题继承”行为。
- 慎用“全量 fallback” mixin，优先按需声明，比如按钮只关心
--btn-bg，不硬塞--text - 不要在 mixin 里尝试检测
CSS.supports——那是运行时逻辑，SCSS 编译期无法介入 - 如果项目用 Webpack + CSS Modules，哈希类名会导致
:root外的局部变量无法被 PostCSS 插件识别，此时 mixin 是唯一可靠方式
PostCSS 插件不是银弹，尤其对局部作用域和运行时变量
像postcss-custom-properties这类工具，只能处理同一文件内、:root下声明的变量。它看不到 SCSS @mixin里生成的var()，也处理不了 JS 动态设置的--theme。
典型失效场景：
- 你在
_button.scss里写.btn { --btn-padding: 0.5rem; padding: var(--btn-padding); }→ 插件不提取，IE 直接崩 - 你用
document.documentElement.style.setProperty('--theme', 'dark')切换主题 → 插件编译时根本不知道这个变量存在 - 你启用了
preserve: true（默认），插件会保留原始var()并加一行 fallback，导致 CSS 体积翻倍
所以真正可靠的 fallback 策略，永远是人写的：每个var()都带第二参数，每个关键变量都在:root里提供初始值（哪怕只是--color: initial），而不是依赖构建工具“猜”。
最常被忽略的一点：空字符串--x: ""不算“未定义”，它会让var(--x, red)取到空值，导致样式丢失。SCSS 层没法拦截这个，只能靠代码规范和 lint 规则卡住。
