Less中用递归mixin模拟循环生成多延时动画，核心是每次递归生成独立选择器并绑定不同animation-delay，禁用动态@keyframes名，延时值需单位计算，终止条件必须明确。
Less里用循环生成多个延时动画的关键是.loop()配合递归和@i步进变量
Less本身没有原生for循环，必须靠递归mixin模拟。核心不是“写个循环”，而是让每次递归都生成一个带不同animation-delay的@keyframes规则或选择器。常见错误是把@i直接塞进@keyframes名里——这会报错，因为Less不支持动态规则名；正确做法是生成多个独立的选择器，每个绑定不同延时的动画实例。
- 递归终止条件必须明确，比如
when (@i > 5)，否则编译卡死 -
@i每次调用要显式递增：.loop(@i + 1)，不能写@i++（Less不支持） - 延时值建议用单位计算：
@delay: @i * 0.2s，避免拼字符串导致单位丢失
生成带不同animation-delay的元素类名（如.item-1到.item-5）
这是最常用、最安全的场景：批量给同类元素加错峰入场动画。每个类名对应一个固定延时，CSS运行时开销低，且兼容所有浏览器。
.generate-delays(@i: 1) when (@i <= 5) {
.item-@{i} {
animation: fade-in 0.6s ease-out @i * 0.2s forwards;
}
.generate-delays(@i + 1);
}
<p>.generate-delays();注意@{i}必须用花括号包裹才能变量插值，@i * 0.2s会自动算出0.2s、0.4s等值。别漏掉递归调用.generate-delays(@i + 1)，否则只生成第一个。
立即学习“前端免费学习笔记（深入）”；
为同一@keyframes名生成多套延时触发的选择器（如.animate-1～.animate-3）
当需要复用同一套关键帧，但不同元素以不同节奏启动时，就用这个模式。重点是把延时逻辑从@keyframes里移出来，只留在选择器的animation声明中。
- 先定义好
@keyframes fade-in（单独写，不参与循环） - 循环只生成选择器，例如
.animate-@{i} { animation: fade-in 0.5s @i * 0.3s both; } - 如果硬要在循环里嵌
@keyframes，Less会报Recursive call to mixin或编译失败
容易被忽略的单位与作用域陷阱
@i * 0.2默认是纯数字，不会自动带s；写成@i * 0.2s才对。更隐蔽的问题是变量作用域：递归mixin里的@i是局部变量，外层同名变量不受影响，所以不用担心污染。但如果你在循环里用了@delay: @i * 0.2s，然后又想在下一层用它——不行，它只在当前层级有效。
真正麻烦的是动画性能：生成20个延时类，CSS文件体积涨得快，且浏览器要解析更多规则。超过10个建议改用JS控制，Less只负责基础动画定义。
