@keyframes 必须顶层静态声明，嵌套或变量插值会报错；动画 mixin 应职责单一、避免参数堆叠；多动画需用逗号简写或语义化 class 组合；响应式应通过 @media 包裹 mixin 调用而非条件判断。
@keyframes 必须顶层静态声明，嵌套或变量插值会直接报错
Less 编译器把 @keyframes 当作顶层指令处理，一旦写在 .mixin() 里、选择器内部，或用 @name 变量拼接名称（如 @keyframes @{prefix}-fade），就会触发 ParseError: Unexpected token 或静默丢弃整块规则。
- ✅ 正确做法：所有
@keyframes放在文件最外层，名称用纯字符串，如@keyframes fade-in、@keyframes slide-up - ⚠️ 若需前缀组合（如组件级命名），可用
~"@{prefix}-fade-in"拼接，但必须确保调用处和声明处的@prefix值完全一致且已在编译期确定 - ❌ 禁止：
.animate-fade(@prefix) { @keyframes @{prefix}-fade { ... } }—— 这不是“动态生成”，而是语法非法
用 mixin 封装动画行为，但别塞进所有参数
一个高维护性的动画 mixin 应聚焦单一职责，比如只控制时长、只绑定名称、只设置填充模式。把 @name、@duration、@easing、@fill-mode 全塞进一个函数，调用时极易传错顺序，后期覆盖某一项也得重写整个调用。
- 推荐拆分：
.animate-name(@name)+.animate-duration(@dur: 0.3s)+.animate-fill(forwards)，可叠加使用 - 必须显式写
animation-fill-mode: forwards——animation简写属性不会自动包含它，漏掉会导致动画结束后元素回退到初始状态 - 单位要统一：全用
s或全用ms，Less 不做单位换算，300ms和0.3s混用可能引发浏览器解析不一致
多动画叠加靠 class 组合，不是 mixin 嵌套
Less 的 mixin 是文本替换，不是返回样式块的函数。写 .animate-scale() .animate-rotate() 并不能让两者共存——它们会各自展开为独立的 animation 声明，后写的会覆盖前写的 animation-name，除非你手动写成逗号分隔的简写形式。
- 可行方式：定义语义化 class，如
.anim-scale、.anim-rotate、.anim-blur，每个绑定不同@keyframes，再通过 HTML 多 class 控制 - 注意声明顺序：CSS 中多个
animation属性并存时，浏览器按源码顺序合并；推荐写成animation: scale 0.3s, rotate 0.5s - Safari 旧版本对逗号多动画支持不稳定，生产环境建议用 JS 切换 class 更可控
响应式动画节奏用媒体查询包裹 mixin，别依赖条件判断
Less 变量在编译期就固定了，.animate(@dur) when (@screen = mobile) 这类写法无效——@screen 不是运行时变量，无法根据设备动态切换。
- 正确做法：用
@media包裹 mixin 调用，例如：@media (max-width: 768px) { .box { .animate-duration(0.2s); } } - 关键帧内容本身一般不做响应式调整（如 from/to 位置），但播放时长、延迟、迭代次数这些可变参数，适合在媒体查询内重新调用 mixin 覆盖
- 避免在 mixin 内部用
if()或when做“逻辑分支”——它只会编译出所有分支的 CSS，白占体积
真正容易被忽略的是：所有动画逻辑都在编译期展开，没有运行时抽象。所谓“封装”只是让开发者少写重复代码，而不是获得类似 JS 函数那样的动态能力。写的时候得时刻想着“这段 Less 最终会输出什么 CSS”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
