less 中 @keyframes 不能嵌套，因其是全局作用域指令；可通过变量拼接命名（如 @{prefix}-slide）或 mixin 封装实现上下文化管理，但无法改变其全局本质，严格隔离需用 css @layer、js 动态注入或 css-in-js。
Less里不能直接嵌套 @keyframes
Less 编译器不识别 @keyframes 作为可嵌套的规则块，哪怕写在选择器内部，也会被原样输出或报错。这不是语法糖缺失的问题，而是 Less 的作用域模型和 CSS 动画规则本身的语义冲突——@keyframes 是全局作用域指令，不从属于任何选择器层级。
常见错误现象：
– 写成 .box { @keyframes slide { from { ... } } }，编译后丢失或生成无效 CSS；
– 用 & 尝试拼接名称（如 &-slide），但 @keyframes 名称不会自动继承父级类名。
用变量 + 字符串拼接模拟“层级命名”
目标不是真嵌套，而是让关键帧名称带上下文标识（比如 button-hover-slide），避免全局冲突，同时保持维护性。
-
@keyframes必须定义在顶层，但名称可用 Less 变量构造：@prefix: button; @keyframes @{prefix}-hover-slide { from { transform: translateX(0); } to { transform: translateX(20px); } } - 调用时也用同一变量确保一致性：
.@{prefix}:hover { animation: @{prefix}-hover-slide 0.3s ease; } - 多个组件共用时，把
@prefix提到文件顶部或 mixin 参数里，避免硬编码
用 mixin 封装动画定义与应用逻辑
把“声明关键帧 + 绑定到选择器”打包成一个动作，减少重复和错配风险。
例如定义一个可复用的滑动动画 mixin：
.make-slide-animation(@name, @from, @to) {
@keyframes @name {
from { transform: @from; }
to { transform: @to; }
}
animation: @name 0.3s ease;
}
使用时：
.card {
.make-slide-animation(card-slide, translateX(0), translateX(-10px));
}
注意：
– @name 必须是合法标识符（不能含空格、特殊字符）；
– Less 会将 @keyframes 提升到编译后 CSS 顶层，但名称已参数化，实际效果等价于手动命名；
– 不要试图在 mixin 里用 & 拼接选择器来“包裹”@keyframes，它依然无效
真正需要层级隔离时，改用 CSS @layer 或 JS 控制
如果项目已支持现代 CSS，且目标是严格作用域隔离（比如微前端中防止关键帧污染），Less 层面无解。此时应转向：
- CSS
@layer（需浏览器支持）：用@layer animations { @keyframes slide { ... } }做逻辑分组，再配合 specificity 控制覆盖； - 运行时 JS 注入：动态生成带哈希后缀的关键帧名（如
slide_abc123），并绑定到对应元素，绕过预编译限制； - 放弃 Less 处理关键帧，改用 CSS-in-JS 库（如 styled-components 的
keyframes函数），天然支持局部作用域
Less 的变量和 mixin 能解决命名组织问题，但无法改变 @keyframes 的全局本质。真要隔离，得跳出预处理器思维，直面 CSS 作用域机制本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
