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 =< length(@shadows)) {
@shadow: extract(@shadows, @i);
@inset-shadows: e("@{inset-shadows}inset @{shadow}");
.loop((@i + 1));
}
.loop(1);
box-shadow: @inset-shadows;
}
但绝大多数场景下没必要——上面那个简单写法已覆盖95%需求。强行用each()反而引入循环变量、空格处理、首尾逗号等新问题。Less的arguments原生拼接最稳，也最快。
容易被忽略的兼容性细节
- IE9及以下不支持多层阴影，但
arguments本身无兼容问题，它只在编译期起作用
- 如果传入空参数（如
.box-shadow-multiple()），生成的CSS会是box-shadow: ;，浏览器会忽略，但最好加守卫：
.box-shadow-multiple(...) when (length(arguments) > 0) {
box-shadow: arguments;
-webkit-box-shadow: arguments;
}
- 注意单位一致性：Less不会校验
0 2px 4px和0 0.1em 0.2em能否混用，出错是CSS运行时的事
arguments本身无兼容问题，它只在编译期起作用.box-shadow-multiple()），生成的CSS会是box-shadow: ;，浏览器会忽略，但最好加守卫：
.box-shadow-multiple(...) when (length(arguments) > 0) {
box-shadow: arguments;
-webkit-box-shadow: arguments;
}
0 2px 4px和0 0.1em 0.2em能否混用，出错是CSS运行时的事真正麻烦的是阴影颜色计算（比如想让每层透明度递减），那得用函数+循环，arguments只是起点，不是银弹。
