@keyframes 必须写在顶层，不能嵌套在 mixin 中——这是所有报错和动画不生效的根源；less 将其视为顶层指令，嵌套会导致解析失败或静默丢弃。
@keyframes 必须写在顶层，不能塞进 .mixin() 里——这是所有报错和动画不生效的根源。
为什么在 mixin 里写 @keyframes 会编译失败或静默丢弃
Less 把 @keyframes 当作顶层指令（类似 @import 或 @media），一旦嵌套在 .animate() { ... } 或选择器内部，语法树就解析失败，轻则输出空规则，重则直接抛 ParseError: Unexpected token。
这不是 Less “不支持动画”，而是作用域模型根本不允许动态生成关键帧名或嵌套声明。
- ❌ 错误示例：
.spin(@speed) { @keyframes spin-@{speed} { to { transform: rotate(360deg); } } } - ✅ 正确做法：所有
@keyframes提到文件最外层，用固定名，如@keyframes spin-fast、@keyframes spin-slow - ⚠️ 注意：IE11 不认
from/to，必须写0%/100%；多文件共用时，统一放在animations/_keyframes.less并用@import (once)引入
.animate() mixin 应只控制调用参数，不生成关键帧
Mixin 的职责是复用 animation 属性配置，不是拼接 CSS 规则。把 animation-name、duration、fill-mode 拆成独立 mixin 更安全、易覆盖：
-
.animate-name(@name)—— 只设animation-name -
.animate-time(@dur: 0.3s)—— 自动补单位，避免混用300ms和0.3s -
.animate-fill(@mode: forwards)—— 必须显式声明，否则动画结束立刻回退 - 不要依赖简写
animation: spin 0.4s ease，它不包含fill-mode，且顺序错乱易被浏览器忽略
多个动画叠加别靠 mixin 嵌套，用 class 组合
想让一个按钮同时旋转 + 发光 + 边框脉动，不要写 .rotate().glow().pulse()——mixin 是纯文本替换，最终会因重复声明 animation 而覆盖前一个。
- ✅ 正确方式：每个动画对应一个独立 class，如
.is-spinning、.has-glow，CSS 中用组合选择器或 HTML 多 class 控制 - ❌ 错误方式：
.btn { .rotate(); .glow(); }→ 编译后只剩最后一条animation声明 - 如果真要“一键启用多动画”，应提前在顶层定义好组合好的
@keyframes（如@keyframes spin-and-glow），再由单一 mixin 调用
需要批量生成关键帧？用递归 mixin 展开，但名字仍得静态
比如生成 12 步旋转帧（每 30° 一帧），不能靠 @keyframes ~"spin-@{i}"，而要用递归展开内容体，名称保持固定：
.gen-rotate-frames(@i: 0) when (@i =<p>注意：<code>@keyframes spin-12step</code> 仍是静态名；<code>.gen-rotate-frames()</code> 只生成帧内容，不参与命名逻辑；递归终止条件 <code>when (@i = 必须明确，否则编译卡死。</code></p><p>关键帧本身是静态产物，Less 不执行动画逻辑——所有“动态”都发生在编译期，漏掉 <code>forwards</code>、混用单位、或误以为 mixin 能返回样式块，才是实际项目中最常卡住的地方。</p>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
