$variable !default仅在变量首次声明前未被赋值时生效，是编译期“抢占式赋值”，非运行时兜底；一旦已定义（如$color: #000），后续$color: red !default即被忽略，且仅对SCSS变量有效，与CSS自定义属性--var无关。
SCSS中$variable !default的生效时机
SCSS的!default只在变量**首次声明前未被赋值**时才起作用，它不是运行时兜底，而是编译期的“抢占式赋值”。一旦某处已用$color: #000明确赋值，后面再写$color: red !default就完全被忽略。
常见错误现象：@import "theme"; @import "components";中，如果theme.scss里已定义$primary: blue，而components.scss里写$primary: purple !default，最终值仍是blue——因为!default没抢到“首发权”。
- 必须把重定义变量的文件放在所有含
!default的@import之前 - 不能在同一个文件里先赋值再
!default（语法合法但无效） - 多个
!default链式声明时，只有第一个未被覆盖的生效
CSS变量（--var）和SCSS变量（$var）别混用
!default只对SCSS变量有效，对CSS自定义属性--theme-color完全无感。想给CSS变量设默认值，得用var(--theme-color, #333)这种运行时语法，两者层级、生命周期、作用域都不同。
典型误用场景：在SCSS里写$--bg: #fff !default，以为能影响background: var(--bg)——实际会报错或被忽略，因为$--bg是非法SCSS变量名（SCSS变量不支持--前缀），且CSS变量根本不受!default控制。
- SCSS变量用于编译前逻辑控制（如生成多套主题CSS）
- CSS变量用于运行时动态切换（如深色模式JS切换
document.documentElement.style.setProperty） - 二者可配合：用SCSS生成带
var(--x, fallback)的CSS，但fallback不能是unset或initial
组件库中用!default暴露可配置项的实际写法
真正健壮的组件SCSS结构，是把所有可配变量集中声明为!default，并在文档里明确标注哪些变量允许覆盖。比如一个按钮组件_button.scss开头应这样写：
$btn-padding: 0.5rem 1rem !default;
$btn-bg: #007bff !default;
$btn-color: #fff !default;
$btn-border-radius: 4px !default;
<p>.btn {
padding: $btn-padding;
background: $btn-bg;
color: $btn-color;
border-radius: $btn-border-radius;
}</p>
使用者只需在@import前引入自己的config.scss：
$btn-bg: #28a745; $btn-border-radius: 6px; @import "node_modules/my-lib/scss/_button.scss";
- 所有
!default变量必须在@import目标文件内，且位于任何使用该变量的样式规则之前 - 避免在
!default后直接跟@if判断——若变量未定义，@if $var会报错，应改用@if variable-exists(var-name) - 导出变量名建议加命名空间前缀，如
$mylib-btn-bg，防止全局冲突
CSS变量默认值在旧浏览器中的兼容陷阱
虽然var(--x, #000)写法简洁，但在Safari 9.1或IE11中，整个var()会被忽略，直接回退到属性初始值（比如color变黑色，background变透明）。这不是!default能解决的问题，而是CSS运行时能力缺失。
安全做法是用@supports做特性检测，而不是依赖!default兜底：
.card {
background: #f8f9fa; /* fallback for no CSS vars */
}
@supports (background: var(--bg)) {
.card {
background: var(--bg, #f8f9fa);
}
}
-
@supports必须写在顶层，不能嵌套在@media或选择器内部 - PostCSS插件如
postcss-custom-properties能静态替换var()，但无法处理calc(var(--x) * 2)这类动态计算，需手动补CSS fallback - SCSS的
!default和CSS的var(, fallback)是两层独立机制，混淆会导致调试困难
真正容易被忽略的是：SCSS变量的!default只解决“编译前谁先写”的顺序问题，而CSS变量的默认值解决的是“运行时变量未定义”的兜底问题——它们不在同一时空维度，强行拉通反而让样式逻辑变得不可预测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
