Less无法执行JS表达式或调用运行时函数，因其是编译时预处理器；Math.random()等不可用，javascript()函数已移除；应由Less生成确定性变体、JS处理运行时动态行为。
Less里不能直接执行JS表达式或调用运行时JavaScript函数
Less是编译时预处理器，所有计算都在CSS生成前完成，Math.random()、document.querySelector()这类运行时JS能力完全不可用。试图在.less文件里写@delay: javascript('Math.random() * 2');会报错——Less 1.4+ 已移除javascript()函数，且现代版本根本不支持任意JS求值。
用Less变量和循环模拟“伪随机”动画参数
真正可行的是在编译阶段用确定性逻辑生成多组不同值，再通过类名或属性选择器暴露出去。适合需要少量固定变体的场景（比如5种加载动画延迟）：
.gen-anim-variants(@i: 1) when (@i =< 5) {
@delay: unit((@i * 0.3), s);
@duration: unit(1s + @i * 0.2s, s);
.anim-variant-@{i} {
animation: spin @duration ease-in-out @delay;
}
.gen-anim-variants(@i + 1);
}
.gen-anim-variants();编译后生成.anim-variant-1到.anim-variant-5五个类，每个含不同animation-delay和animation-duration。这不是随机，但能规避手写重复代码。
真随机必须交给CSS自定义属性 + JS控制
如果页面每次加载都要不同动画效果（比如粒子入场时间错开），就得放弃Less生成静态规则，改用CSS变量配合JS动态赋值：
立即学习“前端免费学习笔记（深入）”；
- Less中只定义带变量的动画模板：
@keyframes staggered-fade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .stagger-item { animation: staggered-fade var(--anim-duration, 0.6s) ease-out var(--anim-delay, 0s); } - JS在运行时为每个元素设置唯一随机值：
document.querySelectorAll('.stagger-item').forEach((el, i) => { el.style.setProperty('--anim-delay', `${Math.random() * 0.8}s`); el.style.setProperty('--anim-duration', `${0.4 + Math.random() * 0.3}s`); });
这种组合才是实际项目中兼顾可维护性与动态性的做法。Less负责结构和默认值，JS负责不可预测的运行时行为。
容易忽略的关键点：CSS变量不触发Less编译，但影响浏览器渲染性能
用--anim-delay这类自定义属性做动画控制时，要注意：
- Less编译器完全无视
--*变量，它们纯属CSS运行时机制，不会被替换或计算 - 频繁修改
--anim-delay可能触发重排（尤其搭配transform以外的属性），建议只用于animation-delay、opacity等合成层友好属性 - 若需服务端预渲染（如Next.js SSR），JS设置变量的逻辑必须包裹在
if (typeof window !== 'undefined')中，否则构建时报错
所谓“Less生成随机动画”，本质是混淆了编译期和运行期职责。真要动态，就别强求Less扛；真要静态可控，就别幻想Math.random()。
