Less中@keyframes不支持变量插值和嵌套循环，无法动态生成帧选择器（如@{i}%），导致硬编码维护困难且违背DRY原则；须用递归mixin提前展开为data属性规则链并配合JS驱动。
为什么直接用 animation 写加载动画在 Less 里会出问题
Less 编译时无法动态计算帧偏移量（比如 @keyframes 里要生成 0%→100% 每 10% 一帧），硬写死帧数会导致维护困难；更麻烦的是，想复用同一套动画逻辑给不同元素（比如旋转速度、缩放比例、延迟时间）时，纯 CSS 写法只能复制粘贴整个 @keyframes 块，违背 DRY 原则。
根本原因：Less 的 @keyframes 不支持嵌套循环或变量插值到帧选择器中（例如 ~"{@i}%" 在 @keyframes 内部不生效）。
用 .loop-offset() Mixin 生成带偏移量的帧规则
核心思路是绕开 @keyframes 内部限制，把帧规则提前“展开”成普通 CSS 规则，再用属性选择器绑定到目标元素上。Mixin 接收总帧数、起始/结束值、属性名，输出形如 [data-frame="0"] { transform: rotate(0deg); } 的规则链。
- 只适用于支持
data-属性 + 属性选择器的现代浏览器（Chrome 4+, Firefox 3.5+, Safari 3.2+） - 必须配合 JS 控制
data-frame属性值更新（不能纯 CSS 驱动） - 帧数建议控制在 12–24 帧以内，避免编译后 CSS 体积膨胀
.loop-offset(@prop, @from, @to, @steps: 12) when (@steps > 0) {
@step-size: (@to - @from) / (@steps - 1);
.loop-offset-loop(@i: 0) when (@i < @steps) {
@val: unit(@from + (@i * @step-size), "deg");
[data-frame="@{i}"] { <code>@{prop}</code>: <code>@{val}</code>; }
.loop-offset-loop(@i + 1);
}
.loop-offset-loop();
}如何调用并配合 JS 实现真实加载动画
比如实现一个 12 帧的旋转加载器，需要两步：Less 中定义帧规则，JS 中驱动属性更新。注意：不要用 setInterval 直接加 1，要按帧率对齐时间戳，否则动画卡顿。
立即学习“前端免费学习笔记（深入）”；
- Less 调用：
.loop-offset(transform, 0, 360, 12);→ 生成[data-frame="0"] { transform: rotate(0deg); }到[data-frame="11"] { transform: rotate(360deg); } - JS 更新需用
requestAnimationFrame计算当前帧索引：const frame = Math.floor((Date.now() % 1200) / 100) % 12;（假设 1200ms 一圈，每帧 100ms） - 务必用
el.setAttribute('data-frame', frame)，而非el.dataset.frame，避免 IE11 兼容问题
性能与兼容性陷阱
这种方案本质是用属性选择器模拟关键帧，CSS 引擎仍需匹配每个 [data-frame="X"]，当页面存在大量同类加载器时，样式计算开销会上升。另外，Sass 用户常误抄此写法，但 Sass 的 @for 在 @keyframes 内同样无效，必须同样走 data-attribute 路线。
- 移动端 WebKit 旧版本（iOS 9.3 以下）对属性选择器批量匹配有性能抖动，建议加
will-change: transform;提前提示渲染层 - 若需服务端渲染（SSR），JS 阶段的
data-frame初始化必须在 hydration 后触发，否则首屏闪动 - 别试图用
@keyframes+calc()替代——CSScalc()在@keyframes中不支持变量，且多数浏览器忽略
真正难的不是写出这个 Mixin，而是判断什么时候该放弃它：如果项目已用 CSS-in-JS 或支持 @property（Chrome 110+），直接用原生动画更稳。Less 的循环偏移量方案，只适合存量 Less 工程里快速补丁式加载动画。
