less中可用递归mixin模拟递归生成多层box-shadow，需用@n计数器控制终止、参数传递拼接结果、波浪号~避免逗号解析错误，超7层建议改用伪元素实现。
Less 里没有真正的递归函数，但可以用递归 mixin 模拟
Less 不支持运行时递归调用（比如 box-shadow 值的动态拼接），但它允许 mixin 递归引用自身——这是生成多重阴影唯一可行的编译期方案。关键在于：必须用 @index 或类似计数器控制终止条件，否则编译会无限循环报错 Recursive call to 'shadow-loop'。
实操建议：
- 定义一个带参数
@n的 mixin，每次调用递减该值，@n = 0时只输出基础样式，不继续调用自身 - 阴影偏移、模糊、颜色等变量应随层级变化（如每层
y偏移 +1px），否则所有阴影叠在一起不可见 - 避免在递归 mixin 中直接拼接字符串到
@shadows变量——Less 变量作用域是块级的，无法累积；必须靠参数传递拼接结果
正确写法：用参数传递拼接好的 shadow 列表
错误做法是试图在 mixin 内部用 @shadows: @shadows, ... 累加；正确路径是让每次调用返回更新后的 shadow 字符串，由上一层接收并继续传下去。
示例（生成 5 层垂直向下渐变阴影）：
.make-shadows(@n, @shadows: 0 0 0 rgba(0,0,0,0)) when (@n > 0) {
@y: (6 - @n) * 2; // 第1层 y=2px，第5层 y=10px
@alpha: 0.08 * @n;
@new-shadow: 0 @y (@y * 2) rgba(0,0,0,@alpha);
.make-shadows((@n - 1), ~"@{shadows}, @{new-shadow}");
}
.make-shadows(@n, @shadows) when (@n = 0) {
box-shadow: @shadows;
}
<p>// 调用
.example {
.make-shadows(5);
}</p>
注意：~"@{shadows}, @{new-shadow}" 中的波浪号 ~ 是必需的，否则 Less 会把逗号当参数分隔符而非字符串内容。
性能与浏览器兼容性实际影响
生成 10+ 层阴影在编译时没问题，但运行时渲染开销明显：Safari 对超长 box-shadow 值解析慢，部分 Android WebView 会截断过长的声明（尤其含透明度计算时）。Chrome DevTools 的 “Rendering” 面板里勾选 “Paint flashing”，能直观看到多层阴影导致的频繁重绘。
建议：
- 超过 7 层后，考虑用伪元素替代（
::before多层叠放），更可控且可单独动画 - 避免在
:hover中动态切换大量阴影——触发编译期生成的 mixin 不会响应状态变化，必须预编译好两套类 - 若需不同方向组合（如左+下+右），不要强行塞进一个递归 mixin，拆成
.shadow-down(3)+.shadow-right(2)更清晰
容易被忽略的单位与空格陷阱
Less 拼接 box-shadow 时，单位缺失或空格错位会导致整个声明失效，浏览器静默忽略该行（DevTools 里看不到 box-shadow 样式）。
常见翻车点：
-
0 @y @y rgba(...)→ 如果@y是数字（如2），结果是0 2 2 rgba(...)，合法；但如果@y是带单位的值（如2px），拼出来是0 2px 2px rgba(...)，也合法；但若写成@y*2且@y是2px，Less 会报错Operation on an invalid type - 阴影颜色里用
hsla()函数时，逗号必须是英文，且括号不能被 Less 解析为函数调用——加引号或用字符串插值绕过：~"hsla(0, 0%, 0%, @{alpha})" - 最终生成的 CSS 必须每层阴影之间用英文逗号分隔，且逗号后要有一个空格，否则某些旧版 Edge 会解析失败
最稳妥的方式：用 inspect 查看编译后 CSS，确认 box-shadow 值是否符合预期格式，而不是只信 Less 输出无报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
