用递归 mixin 生成 0%–100% 旋转帧：.gen-rotate-frames(@i: 0, @step: 10, @max: 100) when (@i =
如何用 Less 生成无限旋转的
@keyframes动画Less 本身不执行动画，它只是编译时预处理器；真正起作用的是编译后输出的 CSS
@keyframes规则。关键在于：用 Less 的循环（.loop()或递归 mixin）生成从0%到100%的旋转帧，避免手写冗余代码。常见错误是直接在
@keyframes内部调用 Less 循环——这不行，因为@keyframes是 CSS 规则块，Less 不允许在其中嵌套 mixin 调用。正确做法是：先用 mixin 生成完整帧规则字符串，再注入到@keyframes中。
- 使用递归 mixin 模拟 for 循环，控制步长（如每 10% 一帧）
- 用
~"rotate(@{deg}deg)"做字符串拼接，避免引号被转义- 必须把整个
@keyframes块包裹在 mixin 外部，不能在@keyframes体内展开 mixin递归 mixin 实现 0%–100% 逐帧旋转
Less 没有原生 for，靠递归 + guard 实现计数。下面这个 mixin 会生成
0%, 10%, 20%, ..., 100%的旋转声明：@i * 3.6
- 调用方式：
.gen-rotate-frames();—— 默认每 10% 一帧，共 11 帧（0–100）- 不要试图在
@keyframes内部调用它，而要把它作为子规则写在@keyframes块里- Less 编译器会把所有匹配的
@{i}% { ... }展开为标准 CSS 帧完整可用的 Loading 动画 mixin
把帧生成和动画应用封装成可复用的 mixin，支持自定义颜色、尺寸、持续时间：
.loading-spin(@duration: 1s, @size: 24px, @color: #007bff) { display: inline-block; width: @size; height: @size; border: 2px solid @color; border-top-color: transparent; border-radius: 50%; animation: spin @duration linear infinite; <p>@keyframes spin { .gen-rotate-frames(); } } </p>然后在元素上直接用：
.loading-spin(0.8s, 20px, #6c757d);
- 这里用了
border+border-top-color: transparent实现经典圆圈旋转，比transform: rotate()全图旋转更轻量- 如果真要用全元素旋转（比如一个图标），把
border替换为background，并确保transform-origin在中心- 注意：某些旧版 Less（@keyframes 内直接展开 mixin，此时需把
@keyframes单独提出来，用变量名引用为什么不用 JavaScript 动态生成 keyframes？
能用纯 CSS/Less 解决的，就别碰 JS。动态插入
CSSRule或document.styleSheets修改虽然可行，但带来额外复杂度：
- SSR 场景下服务端 Less 编译无法执行 JS，会导致首屏无动画
- 样式表注入时机难控，容易触发重排或 FOUC
- 调试困难：Chrome DevTools 看不到动态生成的
@keyframes名称- 绝大多数 Loading 动画参数固定，没必要 runtime 构建
真正需要 JS 的场景只有两个：动画速度/颜色由用户实时调节；或帧数据来自接口（比如 SVG 路径动画）。其他情况，Less 预生成最稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
