SCSS mixin支持默认参数，但带默认值的参数必须置于末尾；未传参时变量取默认值而非null，需用if()函数结合!default变量实现fallback；命名参数须在位置参数之后，复杂默认值需防御性判断。
@mixin 支持默认参数，但默认值只在调用时未传参才生效；直接写 $param: value 即可，无需额外语法。
定义带默认参数的混合宏时，参数顺序和 null 判断要小心
SCSS 允许在 @mixin 参数列表里直接用 : 指定默认值，比如 @mixin padding($x: 1rem, $y: $x)。但注意两点：
- 带默认值的参数必须放在参数列表末尾，否则编译报错：
Invalid CSS after "$y: 1rem": expected ")", was "," - 不能靠
$x == null来判断是否传参——SCSS 中未传参时变量就是默认值本身，不是null；只有显式传null才是null - 如果想实现“用户没传才用全局变量 fallback”，得用独立的 Sass 变量（如
$default-padding: 1rem !default）配合if()函数，而不是依赖参数默认值
调用时省略参数，不等于“不传参”
当你写 @include padding()，SCSS 会把所有带默认值的参数都代入默认值；但如果你写 @include padding(2rem)，它只会覆盖第一个参数，第二个仍用默认值。
- 支持命名参数调用，比如
@include padding($y: 0.5rem)，跳过前面参数 - 但命名参数必须在所有位置参数之后，否则报错：
Invalid argument syntax for @include - 别在调用里写
@include padding($x: 1rem, $y)——$y没值，不是合法表达式
!default 和 mixin 参数默认值是两套机制，别混用
!default 只作用于顶层 Sass 变量（$xxx），对 @mixin 参数无效。你不能写 @mixin btn($color: $primary-color !default) —— 这会直接编译失败。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 正确做法是：先声明
$primary-color: #007bff !default，再在 mixin 里用$color: $primary-color作为默认值 - 如果想让 mixin 同时支持“用户传参”和“读取配置变量”，推荐用
if($color == null, $primary-color, $color)+ 参数设为null默认 - CSS 自定义属性（
--color）更不能用!default，Sass 根本不解析它；必须通过$变量中转
复杂参数（list/map）默认值容易踩坑
当默认值是 list 或 map 时，要注意空值和结构一致性。例如 @mixin shadow($shadows: (0 2px 4px rgba(0,0,0,.1))) 看似没问题，但若用户传 ()（空 list），length($shadows) 是 0，可能触发意外分支。
- 建议对复杂默认值加注释说明结构，比如
// $shadows: (x y blur color, ...) - 用
if(length($shadows) == 0)做防御性判断，比直接展开更安全 - 避免在默认值里写动态计算（如
calc(...)），Sass 不允许在默认值中使用函数调用
真正麻烦的地方不在语法，而在团队协作时——有人改了全局 $ 变量却忘了同步更新 mixin 的默认值，或者把命名参数调用写在了位置参数前面。这些错误不会报红，但生成的 CSS 会悄悄错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
