SCSS参数默认值必须置于末尾，未传参不等于null需用if判断，命名参数须在位置参数之后，list/map默认值需主动防御空结构。
参数默认值必须放在参数列表末尾
SCSS 编译器要求所有带默认值的参数（如 $size: 1rem）必须排在参数列表最后。如果写成 @mixin pad($size: 1rem, $side)，编译会直接报错：Invalid CSS after "$side": expected ")", was ","。
正确顺序是把无默认值的参数放前面，有默认值的放后面：
@mixin pad($side, $size: 1rem) { padding-#{$side}: $size; }
-
@include pad(top, 2rem)→padding-top: 2rem -
@include pad(left)→padding-left: 1rem（自动取默认值）
未传参 ≠ null，不能用 == null 判断是否被传值
很多人误以为没传参时变量是 null，于是写 if($color == null, $fallback, $color) —— 这完全无效。SCSS 中未传参时，变量就是它声明的默认值本身，不是 null；只有你显式传了 null，它才是 null。
想实现“用户不传才 fallback 到全局变量”，得靠独立的 !default 变量 + if()：
立即学习“前端免费学习笔记（深入）”；
$primary-color: #007bff !default;<br>@mixin btn($color: null) {<br> color: if($color == null, $primary-color, $color);<br>}
-
@include btn()→ 取$primary-color -
@include btn(red)→ 用red -
@include btn(null)→ 也取$primary-color（因为判断的是null）
命名参数调用必须在位置参数之后
支持命名调用（比如跳过第一个参数只设第二个），但语法有硬性限制：所有位置参数必须写在前面，命名参数写在后面。
错误写法：@include border($color: red, 2px) → 报错：Invalid argument syntax for @include
正确写法：
-
@include border(2px, $color: red)（位置参数先，命名参数后） -
@include border($style: dashed, $color: green)（全命名，没问题） -
@include border(1px, $color: blue, $style: dotted)（混合也 OK）
注意：@include border($color: red, $width) 是非法的——$width 没值，不是合法表达式。
复杂默认值（list/map）要主动防御空结构
当默认值是 list 或 map 时，容易忽略用户传空值带来的副作用。例如：
@mixin shadow($shadows: (0 2px 4px rgba(0,0,0,.1))) {<br> box-shadow: $shadows;<br>}
看起来安全，但如果调用时传了空 list：@include shadow(())，length($shadows) 就是 0，后续逻辑可能崩溃。
稳妥做法是加一层兜底判断：
@mixin shadow($shadows: ()) {<br> @if length($shadows) == 0 {<br> box-shadow: 0 0 0 transparent;<br> } @else {<br> box-shadow: $shadows;<br> }<br>}
别指望默认值自动处理边界情况；list/map 类型的参数，务必自己做 length() 或 map-has-key() 检查。
