scss混合器通过$args...语法支持可变参数，但必须置于参数列表末尾并显式标注三点；传入的多值需用join()与unquote()组合处理，不可直接使用命名参数或嵌套list。
SCSS混合器（@mixin）本身不支持 JavaScript 那样的「剩余参数」语法，但通过 $args... 语法可以接收任意数量的参数并透传给函数或属性，这是生成复杂 CSS 属性（如 box-shadow、transition、background）最可靠的方式。
可变参数语法必须写成 $args... 形式
SCSS 要求可变参数必须放在参数列表末尾，且显式用三个点（...）标记。漏掉点号、放错位置，或试图在中间加默认值，都会报错 Invalid argument list for @mixin。
-
@mixin transition($prop, $duration, $easing...) { transition: $prop $duration $easing; }✅ 正确 -
@mixin transition($prop, $duration..., $easing) { ... }❌ 报错：可变参数不能在非末位 -
@mixin transition($prop, $duration, $easing...) { transition: $easing; }❌ 错误使用：直接输出$easing是 list 类型，需用join()或展开
多值属性需用 join() 或 ... 展开
像 box-shadow 这类接受多个阴影值的属性，传入的 $shadows... 是一个 list，不能直接拼进属性值。必须用 join($shadows, ", ") 或更安全的 #{inspect($shadows)}（仅调试），但生产环境推荐 join() + unquote() 组合。
@mixin box-shadow($shadows...) {
$joined: join($shadows, ", ");
-webkit-box-shadow: unquote($joined);
box-shadow: unquote($joined);
}
.card { @include box-shadow(0 2px 4px rgba(0,0,0,.1), 0 -1px 0 #eee); }
注意：unquote() 是必须的——否则 join() 返回带引号字符串，CSS 编译后会变成无效值。
避免在可变参数里混用命名参数
SCSS 不允许对可变参数部分使用命名调用。例如 @include transition(property: all, duration: .3s, easing: ease-in) 在 $args... 混合器中会失败，因为命名参数无法被 ... 捕获。
- 正确做法：统一用位置参数，或改用 map 参数（
@mixin transition($config)，然后用map-get($config, "property")） - map 方式更易维护，但失去编译时类型提示；位置方式更轻量，但调用时顺序不能错
- Dart Sass 2.0+ 支持
meta.keywords()解析命名调用，但目前极少项目启用，兼容性风险高
真正容易被忽略的是：可变参数在嵌套 @include 时不会自动扁平化。比如你把 @include box-shadow($shadow-list...) 中的 $shadow-list 定义为另一个 list 变量，它会被当做一个嵌套 list 传入，导致 join() 输出错误格式。务必确认传入的是「一维 list」，必要时用 list.join() 或递归 flatten 函数处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
