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种加载动画延迟）：

.anim-variant-1

• 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负责不可预测的运行时行为。

Json Repair Kit

使用 Node.js 评估修复格式错误的 JSON，自动纠正尾随逗号、单引号、未加引号的键等常见问题，实现文件规范化。

下载

容易忽略的关键点：CSS变量不触发Less编译，但影响浏览器渲染性能

用--anim-delay这类自定义属性做动画控制时，要注意：

• Less编译器完全无视--*变量，它们纯属CSS运行时机制，不会被替换或计算
• 频繁修改--anim-delay可能触发重排（尤其搭配transform以外的属性），建议只用于animation-delay、opacity等合成层友好属性
• 若需服务端预渲染（如Next.js SSR），JS设置变量的逻辑必须包裹在if (typeof window !== 'undefined')中，否则构建时报错

所谓“Less生成随机动画”，本质是混淆了编译期和运行期职责。真要动态，就别强求Less扛；真要静态可控，就别幻想Math.random()。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！