scss无法设置css变量默认值，var(--x, #000)的回退由浏览器运行时执行；正确做法是用嵌套var(--a, var(--b, #000))实现多级降级，scss仅负责安全插值，不干涉运行时逻辑。
SCSS 本身不能“设置” CSS 变量的默认值，var(--x, #000) 的回退行为完全由浏览器在运行时执行，SCSS 只能决定它最终被编译成什么 CSS 字符串。关键在于：别用 SCSS 变量去“替代” var() 的第二参数，否则就失去了运行时灵活性。
别把 $color 直接插进 var(--x, $color)
常见错误是这样写：
$primary: #007bff !default;
.btn { color: var(--btn-color, $primary); }
结果 $primary 被编译成字面量 #007bff，生成的 CSS 是 color: var(--btn-color, #007bff); —— 看似有 fallback，实则 --btn-color 即使被 JS 动态设为 transparent 或 ""，也不会触发回退，因为变量“已定义”。你只是静态兜底，不是真 fallback。
- ✅ 正确做法：让
var()的第二参数保持为纯 CSS 字面量，且只用于真正“未定义”的场景 - ⚠️ 如果你希望主题可切换，
--btn-color必须由 :root 或组件根元素显式声明（或不声明），不能靠 SCSS 插入 - ? 不要用
#{...}拼接复杂表达式到第二参数里，易出错且不可调试
需要编译时 fallback + 运行时覆盖？拆成两层
比如按钮背景色既要支持 SSR 场景下无 JS 时显示基础色，又要允许用户通过 --theme-primary 覆盖：
// _variables.scss
$base-primary: #007bff;
<p>// _button.scss
.btn {
background-color: var(--btn-bg, var(--theme-primary, #{$base-primary}));
}</p>
这里用了嵌套 var()：var(--btn-bg, ...) 尝试读组件级变量；内层 var(--theme-primary, #007bff) 是主题级兜底。SCSS 只负责展开 $base-primary 成合法 CSS 值，不干涉运行时逻辑。
- ✅ 第二参数中允许嵌套
var()，但必须确保语法合法（不能写成var(--a, var(--b))而漏掉 fallback） - ❌ 不要写
var(--a, var(--b, #000))却没在 :root 定义--b——这会导致整个声明无效 - ? 编译时值（如
#{$base-primary}）应选保守、安全的默认色，避免透明、none等易崩坏值
SCSS 中写 calc() 回退要小心
有人想用 calc() 实现条件 fallback，比如 “若 --size 无效，则用 1rem”：
// ❌ 危险写法（IE 不支持，现代浏览器也非标准） font-size: calc(1 * var(--size) + 0 * var(--size, 1rem));
这种技巧依赖浏览器对非法 var() 的降级行为，不稳定且难维护。
- ✅ 推荐：直接用双层
var()，语义清晰、兼容性好 - ⚠️ 若必须用
calc()，只把它当普通 CSS 函数用，例如var(--gap, calc(1rem + 2px))—— 这里calc()是回退值的一部分，不是控制逻辑 - ? 不要在第二参数里放未解析的
var(--x)，除非你确认它一定存在或有自身 fallback
最常被忽略的一点：回退是否生效，和 SCSS 编译结果无关，只取决于最终输出的 CSS 中变量是否“真未定义”。调试时别看 SCSS 文件写了啥，要看 DevTools 的 Computed 面板里 color 最终计算值是不是你写的 fallback —— 那才是唯一可信信号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
