Less中用参数化mixin定义阴影动画需分两层：第一层生成带参@keyframes（用~""包裹动画名防编译错误），第二层class设置animation属性；避免将复合animation塞入mixin，预留@useTransform降级开关提升性能。
Less中怎么用参数化混合（mixin）定义阴影动画
不能直接用 @keyframes 套 Less 变量，但可以用 mixin 封装带参的动画规则 + 关键帧定义，再配合 .animation 调用。核心是把动画名、阴影值、持续时间、缓动都做成参数，避免重复写 @keyframes shadow-pulse-0-10-0-5 这类难读的名字。
实操建议：
- 动画名用字符串拼接生成（
~"shadow-bounce-@{intensity}-@{duration}"），确保唯一性且可预测 - 关键帧内部必须用
box-shadow，不能简写为shadow（Less 不识别） - 参数默认值设为常用组合：比如
@intensity: 0 4px 12px rgba(0,0,0,0.15)，@duration: 0.4s - 别在 mixin 里写
animation: ...，只负责生成@keyframes；调用时单独加animation属性更灵活
为什么不能把 animation 属性也塞进 mixin 参数里
因为 animation 是复合属性，包含动画名、时长、延时、次数、方向等，全塞进一个 mixin 容易失控——比如你只想改时长，却得重传所有参数，还容易漏掉 forwards 或 ease-out 导致动画跳变。
更稳妥的做法是分两层：
立即学习“前端免费学习笔记（深入）”；
- 第一层 mixin（如
.shadow-keyframes(@name, @from, @to)）只生成@keyframes - 第二层 class（如
.shadow-pulse()）负责设置animation: ~"@{name} @{duration} ease-in-out infinite" - 这样改动画行为（比如从
infinite改成1）不用动关键帧定义，也不影响其他使用该阴影的组件
遇到 “Invalid CSS after ‘@keyframes’” 错误怎么办
这是 Less 编译器报的典型错误，90% 是因为变量没正确插进动画名里。比如写了 @keyframes shadow-@intensity，但 @intensity 是带空格的值（如 0 4px 12px），Less 会卡在第一个空格处。
解决方法只有两个：
- 用
~""字符串插值包裹整个动画名：@keyframes ~"shadow-@{safeName}" - 确保传入的
@safeName是纯字母/数字（可用replace()函数清洗，比如replace(@intensity, " ", "-")） - 绝对不要在
@keyframes后直接跟未包裹的变量，哪怕它看起来只是个数字
移动端阴影动画性能差？试试 will-change 和 transform 替代
连续变化 box-shadow 在低端 Android 上掉帧严重，尤其叠加多个元素时。这不是 Less 的问题，但你在定义 mixin 时可以预留降级开关。
推荐方案：
- 加一个
@useTransform: false参数，默认关；设为true时，用transform: scale(1.02)模拟轻微“凸起”感，比改box-shadow省资源 - 对必须用阴影的场景，强制加
will-change: box-shadow（仅限触发动画的元素，别全局写） - 在 mixin 里用
.if(@useTransform) { ... }分支控制生成逻辑，保持一份源码适配两种路径
@keyframes + mixin 组合，并把所有参数入口收束到一两个顶层调用点，比后期重构省力得多。 
