应使用@duration变量统一控制动画时长，并通过.animate()混合支持传参覆盖，默认值为@duration；@keyframes内不可用less变量，需在调用处设置时长；避免混用less变量与css自定义属性。
用 @duration 变量统一控制动画时长，别硬写 0.3s
Less 里最直接的控制方式，就是把动画时长抽成变量。很多人在写 transition 或 animation 时反复写 0.3s、0.2s，结果改一处漏十处。定义一个 @duration 就能全局联动：
@duration: 0.3s;
.box {
transition: all @duration ease-in-out;
animation: slideIn @duration ease-out;
}
注意：变量名别用 @animation-duration 这类带连字符的——Less 会把它当减法运算，直接报错 Operation on an invalid type；必须用驼峰或下划线。
封装 .animate() 混合（mixin），支持传参覆盖默认时长
光靠变量不够灵活：有些按钮要快（0.15s），弹窗要慢（0.4s）。用 mixin 封装，既能复用逻辑，又能按需覆盖：
.animate(@time: @duration, @easing: ease, @delay: 0s) {
transition: all @time @easing @delay;
}
.btn {
.animate(0.15s, cubic-bezier(0.2, 0.8, 0.4, 1));
}
.modal {
.animate(0.4s, ease-out, 0.05s);
}
关键点：
-
@time设默认值@duration，不传参就走全局节奏 - 避免把
animation-name也塞进这个 mixin——它和时长、缓动属于不同维度，混在一起反而难维护 - 如果项目里有多个动画类型（fade / slide / scale），建议拆成
.animate-fade()、.animate-slide()，而不是堆参数
配合 @keyframes 使用时，变量不能直接插进动画体内部
Less 变量无法在 @keyframes 块里生效，下面这样写会失败：
@duration: 0.3s;
@keyframes spin {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); animation-duration: @duration; } // ❌ 错误：@keyframes 内不解析变量
}
正确做法是：动画体里只写纯 CSS，时长由调用处控制：
@keyframes spin {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
.spinner {
animation: spin @duration linear infinite;
}
如果你真需要动态生成 keyframes（比如不同速度的旋转），就得用 Less 的循环 + .each() 或拼接字符串，但绝大多数项目没必要这么复杂——时长交给元素自身控制更可控。
警惕 CSS 自定义属性（--duration）和 Less 变量混用
有人想“既用 Less 编译期变量，又留 Runtime 调节口”，于是这样写：
:root {
--duration: 0.3s;
}
.box {
transition: all @duration ease; /* Less 变量 */
animation-duration: var(--duration); /* CSS 变量 */
}
这看似两全，实际埋雷：
- 两个值不同步：改了
@duration不等于--duration自动变，容易不一致 - 调试困难：浏览器开发者工具看到的是编译后的 CSS，你得来回比对 Less 源码和 CSS 输出，确认到底哪个在生效
- 除非你明确需要 JS 动态修改动画时长（比如用户偏好设置），否则坚持用 Less 变量就够了——简单、可预测、无 runtime 开销
真正需要 JS 控制时，直接用 element.style.animationDuration = '0.2s' 更轻量，不必提前定义 CSS 变量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
