参数缺失不是语法错误，而是编译后生成非预期css，需确认缺失参数、调用方与定义方；@mixin必填参数须设默认值，否则漏传会导致参数错位、计算崩溃；推荐使用命名参数调用并配合编译后css排查。
参数缺失不是语法错误，而是编译后生成了非预期的 CSS —— 你得先确认它到底缺了什么、谁在调用、谁在定义。
检查 @mixin 定义中是否声明了默认值
没有默认值的必填参数，一旦调用时漏传，Sass 编译器不会报错，但会把后续参数错位绑定，导致样式“看起来不对”却找不到原因。
- 错误写法：
@mixin spacing($vertical, $horizontal)→ 调用@include spacing(16px)会令$vertical=16px，$horizontal变成undefined，后续计算如#{$horizontal * 2}直接崩溃或输出无效 CSS - 正确写法：
@mixin spacing($vertical: 0, $horizontal: $vertical)，让第二个参数有 fallback，且逻辑自洽 - 老项目若用 Sass 3.4–3.5，不支持命名参数，必须靠位置+默认值兜底；Dart Sass（当前主流）建议统一用
$param: default形式
调用时优先使用命名参数而非位置参数
位置参数依赖严格顺序，协作或重构时极易出错；命名参数显式绑定，顺序无关，还能跳过中间可选参数。
- 危险调用：
@include button(14px, 'primary', true)—— 若某天@mixin button($size, $theme, $rounded, $fullwidth)新增第四个参数，这行就 silently 错配 - 安全调用：
@include button($size: 14px, $theme: 'primary', $rounded: true)—— 新增参数不影响已有调用 - 注意：命名参数在 Dart Sass 中可用，在 LibSass（已弃用）或旧版 Node Sass 中不支持，需确认
sass --version输出为1.x或更高
排查编译后 CSS 是否重复/错乱生成
SCSS 混合宏是编译期展开，每次 @include 都完整复制一份内容 —— 参数缺失导致的逻辑分支未覆盖，常表现为某些规则没生成，或生成了空值/NaN 的属性值。
- 打开编译后的
.css文件，搜索对应选择器，确认是否缺失某段规则（比如本该有margin-top: 16px却完全没出现） - 若看到类似
margin: NaN auto或color: null，说明参数未定义且参与了计算，需回溯到 mixin 内部加@if not $param { @error "Missing required param: #{$param-name}" } - 别依赖 DevTools “样式面板”判断 —— 它只显示最终生效规则，而 mixin 展开可能生成了被覆盖或无效的规则，得看源 CSS 文件
真正容易被忽略的是：参数缺失往往不报错，它只是让 mixin 内部的条件分支失效、计算返回 null 或默认单位丢失，最后产出的 CSS 看似“少了一块”，实则是逻辑链断在了参数传递这一环。盯住定义、调用、编译结果三处，比查文档更快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
