Sass 不支持函数重载，同名 @mixin 会覆盖或报错；必须用 $args... + length() + @if 分支模拟，配合 type-of() 和 @error 确保类型安全与错误提示。
为什么 @mixin 不能靠参数个数自动重载？
Sass 本身不支持像 TypeScript 或 Rust 那样的函数重载机制，@mixin 没有“根据参数数量自动匹配不同实现”的能力。你写两个同名但参数不同的 @mixin，Sass 编译器会直接报错：Invalid CSS after "...": expected "{", was ";" 或更隐晦的 Mixin "xxx" is not found —— 实际是后定义的覆盖了前定义，或者解析失败。
用 @if + length() 模拟重载逻辑
最常用、也最可控的方式，是把所有可能的参数收进一个列表（$args），再用 length($args) 分支判断。这本质是“单入口多路径”，不是语法级重载，但效果等价。
比如想实现一个 border-radius 的智能 mixin：
@mixin radius($args...) {
@if length($args) == 1 {
border-radius: $args;
} @else if length($args) == 2 {
border-radius: nth($args, 1) nth($args, 2);
} @else if length($args) == 4 {
border-radius: nth($args, 1) nth($args, 2) nth($args, 3) nth($args, 4);
} @else {
@error "radius() expects 1, 2 or 4 arguments, got #{length($args)}";
}
}
-
$args...是关键：它捕获所有传入参数为 list，避免编译期参数不匹配错误 - 用
nth()取值时注意索引从 1 开始，不是 0 - 务必加
@error分支——否则静默失败，调试时很难定位
参数类型混合时，别只依赖数量
光看个数不够。比如 padding(10px) 和 padding(auto) 都是 1 个参数，但语义不同；color(red) 和 color(#ff0000) 也需区分。
这时得结合 type-of() 或 unit() 判断：
@mixin padding($val) {
@if type-of($val) == "number" and unit($val) == "px" {
padding: $val;
} @else if $val == auto {
padding: auto;
} @else {
@error "padding() only accepts px values or 'auto'";
}
}
-
type-of()返回number/string/color等，比length()更细粒度 - 注意
auto是 keyword，不是字符串，不能写成"auto" - 混合判断时，顺序很重要：先判类型，再判值，避免
unit(null)这类运行时错误
真实项目里容易漏掉的兼容性细节
这种写法在 Dart Sass 1.30+ 完全可用，但旧版 LibSass（如 Node Sass）对 $args... 支持不稳定，某些版本会把 ... 当作语法错误。
- 确认你的构建链用的是
dart-sass（推荐），而非已归档的node-sass - 如果必须兼容旧环境，改用固定参数 +
optional参数模拟，例如：@mixin radius($tl: null, $tr: null, $br: null, $bl: null)，再用@if not ($tl == null)判断 - 所有分支都要有明确输出或
@error，否则未覆盖路径会生成空 CSS 规则，造成样式丢失且无提示
参数数量判断本身很简单，真正麻烦的是边界情况：空值、null、undefined、keyword 和 string 的混淆——这些不会报错，但会让生成的 CSS 不符合预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
