<p>Less不支持for循环，需用递归mixin加保护条件实现关键帧动画；通过@i: @i - 1更新参数并用@{i}插值生成选择器或属性值；@keyframes名称和帧值须用@{name}、@{p}%动态拼接，且插值仅在特定上下文中生效。</p>
用 for 循环写关键帧动画？Less 本身不支持
Less 没有原生 for 语句，所谓“循环”靠的是递归 mixin + 保护条件（guard）。直接写 for (let i = 0; i 会报错——那不是 Less，是 JS。真实做法是定义一个带计数器的 mixin，每次调用自身并递减，直到满足终止条件。
常见错误现象：.keyframes-loop(10); 却没定义 .keyframes-loop 的递归逻辑，结果编译失败或只生成一帧；或者忘了加 when (@i > 0) 导致无限递归、编译卡死。
- 必须用
@i: @i - 1更新参数，并在下一层递归中传入 - 每一层递归里用
@{i}插值生成选择器或属性值（比如0% { opacity: @{i} * 0.1; }） - 不要在递归 mixin 里写
.keyframes-loop(@i - 1);这种无变量绑定的写法——Less 不支持表达式直接传参，得先赋值再传
@keyframes 名称和帧值怎么动态拼接
拼名称用插值 @{name}，拼百分比帧用 @{p}%，但要注意：插值只在属性值、选择器、@keyframes 块名里生效，不能用于规则外的任意位置。
典型使用场景：为一组图标生成不同延迟的淡入动画，每个动画名带编号（如 fade-in-1, fade-in-2），每帧的 opacity 和 transform 随编号微调。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：@keyframes @{name} { @{p}% { ... } } 看似合理，但 @{p}% 在旧版 Less（(@p * 1)% 触发数值计算。
- 动画名插值必须放在
@keyframes后、空格前：@keyframes @{anim-name} { ... } - 帧值插值推荐用
(@p * 1)%或~"@{p}%"（后者兼容性更广） - 避免在插值中混用单位和数字，比如
@{p}px要确保@p是纯数字，否则生成5pxpx
性能与兼容性：别让 Less 循环生成冗余 CSS
Less 递归展开后，每一帧都变成独立 CSS 规则。10 帧动画 × 5 个动画名 = 50 组 @keyframes 块，体积膨胀快，且浏览器需解析更多文本。这不是运行时问题，而是构建阶段的产出控制问题。
真实影响：Webpack + less-loader 编译慢、SourceMap 映射混乱、DevTools 里看到的 CSS 行号和 Less 源码对不上；某些 CI 环境因内存限制直接中断编译。
- 用
//注释掉不用的递归分支，比用when条件更彻底（注释不参与编译） - 把帧数抽成变量（如
@frames: 8;），调试时临时设为3，验证逻辑后再调回 - 生成的 CSS 如果含大量重复 transform 属性，考虑改用
animation-timing-function: steps()替代多帧，减少输出量
导出动画时，extend 和 class 引用哪个更稳
生成完 @keyframes 后，要用 class 绑定动画。此时别用 :extend() 去继承动画名——extend 不处理 @keyframes，它只匹配选择器，而 @keyframes 不是选择器，不会被继承，写了也白写。
正确做法是老老实实写 class，用 animation-name 指向生成的动画名。如果想复用动画逻辑，把 class 定义也封装进 mixin，而不是依赖 extend。
- 错误写法：
.icon { &:extend(.fade-in-1 all); }——.fade-in-1是动画名，不是 class - 正确写法：
.icon-1 { animation: fade-in-1 0.3s ease; }，其中fade-in-1是递归 mixin 生成的实际动画名 - 若多个元素共用同一套帧逻辑，把帧定义抽成独立 mixin，class 里只负责调用和传参，避免重复生成整套
@keyframes
递归深度、插值时机、输出体积这三件事，往往在改完一个参数后才暴露出来——不是语法错，是效果错或构建崩。动手前先写个 @frames: 2; 跑通最小闭环，再扩。
