SCSS mixin默认参数“不生效”是因漏传导致参数错位、undefined参与计算生成无效CSS（如margin: NaN auto）或跳过逻辑分支；须将默认值置于参数末尾、用自洽fallback、优先命名参数调用，并检查编译后CSS确认规则是否生成。
SCSS 中 mixin 默认参数“不生效”，通常不是语法写错，而是参数被错位绑定、未触发预期逻辑分支，或编译后 CSS 根本没生成对应规则——它不报错，但样式就是不对。
为什么@include调用时漏传参数会导致样式错乱
SCSS 不校验必填参数，漏传后变量取值为 undefined，参与计算时直接产出无效 CSS（如 margin: NaN auto）或跳过条件判断分支。
-
@mixin spacing($vertical, $horizontal)→ 调用@include spacing(16px)会让$vertical = 16px，$horizontal变成undefined - 若内部有
margin: #{$vertical} #{$horizontal}，结果是margin: 16px undefined，浏览器忽略整条声明 - 若用了
if($horizontal == null, ...)判断，也永远不会进这个分支——因为未传参 ≠null，而是根本没定义该变量值
如何正确定义带默认值的 mixin 参数
默认值必须写在参数列表末尾，且推荐用自洽 fallback（比如让第二个参数默认等于第一个），而不是裸写 0 或 null。
- ✅ 正确：
@mixin padding($y: 1rem, $x: $y)——$x有明确 fallback，且依赖已定义变量 - ❌ 错误：
@mixin padding($x: $y, $y: 1rem)——$y在$x声明时尚未定义，编译失败 - ⚠️ 注意：
!default对 mixin 参数无效，不能写$color: $primary-color !default，只能先确保$primary-color自身带!default，再在 mixin 里引用它
命名参数调用比位置参数更可靠
位置参数靠顺序绑定，一旦 mixin 新增中间参数，所有旧调用都会 silently 错配；命名参数显式指定，顺序无关，还能跳过可选参数。
立即学习“前端免费学习笔记（深入）”；
- ✅ 安全调用：
@include button($size: 14px, $rounded: true)—— 即使后续加了$variant参数，这行也不受影响 - ❌ 危险调用：
@include button(14px, true)—— 若某天改成@mixin button($size, $variant, $rounded)，true就会被绑到$variant上 - ⚠️ 命名参数仅 Dart Sass（
sass --version输出 1.x+）支持；旧版 Node Sass / LibSass 不识别，会报Invalid argument syntax for @include
编译后 CSS 是唯一可信证据
别信 DevTools 的“Styles”面板——它只显示最终生效规则。mixin 展开后若因参数缺失导致某段规则未生成，或生成了 color: null 这类非法值，你得直接打开编译输出的 .css 文件查证。
- 搜索目标选择器，确认是否缺失某条规则（比如该有的
margin-top: 16px完全没出现） - 看到
margin: NaN auto或background-color: null？说明参数未定义且参与了计算，需回溯到 mixin 内加防御判断：@if not $horizontal { @error "Missing required param: horizontal"; } - 真正容易被忽略的是：参数缺失不会中断编译，它只是让逻辑链断在传递环节，最终表现为“少了一块样式”，而你可能花一小时检查选择器优先级，却没看一眼编译结果
