arguments是less混合中自动可用的只读参数列表变量，索引从1开始，需用extract(arguments, 1)取值，不可用arguments[0]或解构。
Less中arguments变量到底是什么？
arguments是Less内置的只读变量，它在混合（mixin）内部自动可用，值为调用该混合时传入的所有参数组成的列表（list），顺序与传入一致。它不是JavaScript里的arguments对象，不支持索引访问如arguments[0]，也不能直接解构——但可以被each()遍历、用length()查长度、或用extract()取指定位置。
常见误解是把它当数组用，结果报错Property '0' of object #<object> is not a function</object>，就是因为试图写arguments[0]。Less里必须用extract(arguments, 1)（注意：索引从1开始）。
用arguments写多层阴影mixin的实际写法
目标是输入任意数量的阴影描述（如0 2px 4px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.08)），自动生成box-shadow声明，同时兼容旧版-webkit-box-shadow。
.box-shadow-multiple(...) {
@shadows: arguments;
box-shadow: @shadows;
-webkit-box-shadow: @shadows;
}
调用方式：
.card {
.box-shadow-multiple(
0 2px 4px rgba(0,0,0,0.1),
0 4px 12px rgba(0,0,0,0.08),
0 8px 24px rgba(0,0,0,0.05)
);
}
关键点：
-
...语法表示接受不定参数，这是arguments生效的前提 -
@shadows: arguments把参数列表赋给变量，避免重复写arguments - 直接把
@shadows用于属性值，Less会自动用逗号拼接各参数项
为什么不用join()或each()？
有人尝试手动拼接来加前缀或做转换，比如给每层阴影加inset，这时才需要each()：
.box-shadow-inset-multiple(...) {
@shadows: arguments;
@inset-shadows: ~"";
.loop(@i) when (@i =<p>但绝大多数场景下没必要——上面那个简单写法已覆盖95%需求。强行用<code>each()</code>反而引入循环变量、空格处理、首尾逗号等新问题。Less的<code>arguments</code>原生拼接最稳，也最快。</p><h3>容易被忽略的兼容性细节<ul>
<li>IE9及以下不支持多层阴影，但<code>arguments</code>本身无兼容问题，它只在编译期起作用</li>
<li>如果传入空参数（如<code>.box-shadow-multiple()</code>），生成的CSS会是<code>box-shadow: ;</code>，浏览器会忽略，但最好加守卫：<pre class="brush:php;toolbar:false;">
.box-shadow-multiple(...) when (length(arguments) > 0) {
box-shadow: arguments;
-webkit-box-shadow: arguments;
}
0 2px 4px和0 0.1em 0.2em能否混用，出错是CSS运行时的事真正麻烦的是阴影颜色计算（比如想让每层透明度递减），那得用函数+循环，arguments只是起点，不是银弹。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
