关键帧名称未被less压缩错乱，真正原因是--compress删除sourcemap注释导致调试失效、postcss插件（如cssnano）误删重复定义、或插值变量未定义/大小写不匹配。
关键帧名称被压缩错乱，不是 Less 编译器“压缩”了它，而是你用了 --compress 且没关掉 @keyframes 名称的混淆逻辑——但 Less 本身根本不会混淆名称，真正的问题在构建链路下游。
lessc --compress 不会重命名 @keyframes，但会删掉注释和换行，导致 source map 断裂
Less 自身没有 CSS 压缩能力，--compress 只是移除所有空白符（包括换行、缩进、空格），把整个文件压成单行。它不修改任何标识符名，@keyframes bounce-in 压完还是 @keyframes bounce-in。
但问题在于：压缩后 CSS 底部的 /*# sourceMappingURL=styles.css.map */ 注释也被删了，浏览器找不到 Source Map；而开发时靠它定位到 .less 里的 @keyframes 声明行。一旦断链，你看到的“错乱”其实是调试器里显示不到源码，误以为名字被改了。
- 用
lessc --source-map=styles.css.map input.less styles.css先生成带 map 的未压缩 CSS - 再用
cleancss -o styles.min.css styles.css压缩，而非直接lessc --compress - 确保
cleancss加上--source-map-include-content和--no-rebase，避免路径错位
真正会“改名”的是 PostCSS 插件（比如 cssnano）
很多现代构建工具（Webpack/Vite）默认走 PostCSS 流程，cssnano 启用 reduceIds 或 discardDuplicates 时，可能把 @keyframes fade-in 当作可删的冗余规则——尤其当你在多个文件里重复定义了同名 @keyframes，它会静默合并或丢弃后一个。
- 检查
postcss.config.js是否启用了cssnano，并确认preset: ['default', { discardDuplicates: false }] - 更稳妥的做法：所有
@keyframes集中定义在animations/_keyframes.less，用@import (once)引入，从源头避免重复 - 不要依赖构建工具“自动 dedupe”，Less 无法跨文件检测同名
@keyframes，得靠人工收敛
名称看似“错乱”，实际是 ~"@{name}" 插值失败或大小写不一致
如果你用了字符串插值（比如 @keyframes ~"@{prefix}-slide"），但 @prefix 未定义、拼写错误、或含非法字符（如空格、斜杠），Less 会静默丢弃整块 @keyframes，编译结果里就没了这个动画——你在浏览器里查 animation: card-slide 却找不到对应定义，自然觉得“错乱”。
- 变量必须在顶层定义：
@prefix: "card";（注意加引号，否则~"@{prefix}-slide"输出的是card-slide而非字符串字面量） - 插值后名称严格区分大小写：
@keyframes CardSlide和animation: cardslide不匹配 - 避免在插值中混入运算：
~"@{prefix}-@{speed}ms"是错的，@speed: 300不能直接拼进字符串，应提前算好：@name: "card-slide-300"; @keyframes ~"@{name}"
最常被忽略的一点：IE11 要求关键帧用 0%/100%，而你写了 from/to，某些压缩工具会尝试“标准化”成百分比写法，但没同步更新 animation 属性里的时长参数，结果动画卡在 0% 不动——这不是名称错乱，是行为失效，但表象很像。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
