!default 对 css 自定义属性（如 --color-primary）无效，因其是 sass 编译期机制，仅作用于 $xxx 变量；而 --xxx 是运行时 css 特性，sass 不解析也不回退它，直接使用会报语法错误。
不能直接用 !default 给 CSS 自定义属性（即 --xxx 变量）设默认值，它只作用于 Sass 变量（$xxx），不是运行时的 CSS 变量。
为什么 !default 对 --color-primary 无效
Sass 的 !default 是编译期机制，仅影响 Sass 变量（如 $primary-color）的赋值逻辑；而 CSS 自定义属性（--color-primary）是浏览器运行时解析的，Sass 不会“覆盖”或“回退”它们。如果你写了：
:root {
--color-primary: $primary-color !default; // ❌ 语法错误：!default 不能用于属性值
}
这会直接报错：Invalid CSS after "--color-primary:": expected "{", was "!default"。
正确做法：用 Sass 变量做中间层 + !default
把默认值逻辑放在 Sass 变量上，再把该变量输出为 CSS 变量。这是唯一可靠、可维护的方式：
-
$primary-color用!default设默认值（必须在所有可能赋值前声明） - 在
:root或其他选择器中，用#{$primary-color}插入其值到--color-primary - 若项目需支持主题切换，可额外封装一个
@mixin输出整套变量
示例：
$primary-color: #007bff !default;
$font-size-base: 16px !default;
:root {
--color-primary: #{$primary-color};
--font-size-base: #{$font-size-base};
}
混合宏里怎么安全传参并 fallback 到默认值
写 @mixin 时，参数本身不支持 !default，但可以用 if() 函数配合默认值变量实现逻辑 fallback：
- 先定义带
!default的全局 Sass 变量（如$btn-padding: 0.5rem 1rem !default） - 混合宏参数设为
$padding: null，表示可选 - 内部用
if($padding == null, $btn-padding, $padding)决定最终值 - 避免直接在 mixin 参数里写
$padding: $btn-padding !default—— 这会导致每次调用都强制重赋值，破坏用户显式传参意图
示例：
$btn-padding: 0.5rem 1rem !default;
@mixin button-base($padding: null) {
padding: if($padding == null, $btn-padding, $padding);
background: var(--color-primary);
}
容易被忽略的关键点
CSS 变量的“默认值”只能靠 var(--x, fallback) 在使用处声明，Sass 无法提前注入这个 fallback；!default 的生效顺序极其敏感——它只在变量**尚未被赋值**时才起效，所以所有 !default 声明必须放在任何可能的 $var: ... 赋值之前，否则静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
