会报错；Less中变量拼接动画名必须用~"@{name}"转义插值，否则因解析为数学运算或非法标识符而编译失败，且@keyframes须置于顶层作用域才能生效。
Less里用变量拼接动画名会报错吗
会。直接写 animation: @name 0.3s; 没问题，但想拼出 fade-in-quick 这种带连字符的动态名字时，Less 默认把 @name + '-quick' 当作数学加法——尤其当 @name 是数字（比如 @speed: 3）就真变成 3-quick 报语法错误。
根本原因是 Less 的插值（@{xxx}）只在字符串上下文中生效，而动画名属于 CSS 标识符（identifier），不是纯字符串值。必须显式包裹进引号再插值，否则编译器不认。
- 错误写法：
animation: fade-in-@speed 0.3s;→ 编译失败或生成非法标识符 - 正确写法：
animation: ~"fade-in-@{speed}" 0.3s;或animation: "@{prefix}-@{speed}" 0.3s; - 注意：
~""是 Less 的“转义字符串”，告诉编译器这整段按字面量输出，不解析内部变量以外的内容
Mixin里怎么安全传参并生成多套动画名
单纯拼字符串不够，得让调用方能灵活控制前缀、后缀、时长、缓动等，同时避免命名冲突和无效值。关键点是：参数默认值 + 类型守卫 + 插值位置精准。
例如这个常用结构：
.animate(@prefix: 'slide', @dir: 'up', @dur: 0.25s, @easing: ease-out) {
@name: ~"@{prefix}-@{dir}";
animation: @name @dur @easing;
// 同时注入对应 @keyframes（需提前定义好模板）
@{keyframes} @name {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
}
-
@name必须用~"@{...}"构造，不能漏掉波浪号 -
@{keyframes}是 Less 7+ 支持的动态规则名写法，旧版需改用.make-keyframes(@name)分离定义 - 如果
@dir可能为空（如基础 fade），要加 guard：& when (@dir = '') { @name: @prefix; }
为什么生成的动画名在浏览器里不触发
最常见原因不是名字拼错了，而是 @keyframes 没被实际输出到 CSS 中。Less 的作用域规则会让嵌套在 Mixin 里的 @keyframes 被忽略——除非它出现在全局作用域，或被至少一处调用“激活”。
- 错误模式：把
@keyframes写在 Mixin 内部，但只调用了.animate()而没引用对应动画名 - 解决方式：要么把
@keyframes提到顶层（配合 guard 控制输出），要么用.make-keyframes()显式调用一次 - 另一个坑：
animation-name值区分大小写，但 Less 插值后全小写，若 keyframes 定义为@keyframes FadeIn，插值~"FadeIn"才匹配，否则白搭
要不要用 JavaScript 动态写入动画名更稳妥
如果项目已用 Webpack/Vite + CSS Modules，或需要运行时根据用户偏好切换动画，那 Less 预编译方案反而僵硬。此时直接用 JS 设置 el.style.animationName = `fade-${speed}` 更直接，还能配合 CSS.supports('animation-name', 'test') 做降级。
但如果是构建时确定的组合（比如设计系统固定 6 种入场动画 × 3 种速度），Less 插值 + Mixin 依然高效——只要记住：插值必须带 ~""，@keyframes 必须逃逸出 Mixin 作用域，且名字大小写要和定义完全一致。
