关键帧循环动画导致编译错误

Question

我正在尝试创建 Less 循环，以使用 CSS 为硬币左侧和顶部位置设置动画。我创建了一些 Less mixin，它创建了一个关键帧并将其分配给当前元素，但我收到了 Less 错误。有人可以说，这段代码有什么问题吗？

.boom (@index) when (@index > 0){
   @keyframes boom@index {
       0% {
          top: 50%;
          left: 50%;
       }
       50%{
          top: random(2500)+px;
          left: random(2500)+px;
       }
   }
   .coin:nth-child(@{@]index}){
        left: unit(@{i}* 10, px);
        animation-duration: 2.6s;
        animation-name: boom-@{i};
        animation-direction: alternate;
        animation-timing-function: ease-in-out;
  }
  .boom(@index - 1);
}
.boom(5);

Answer 1

我认为所给出的代码中有几个拼写错误，因为在一些地方使用了 @{i}。我假设它们是 @{index}.

除此之外，更正如下：

当你给出 @keyframes boom@index 时，首先你必须使用 @{} 形式的变量，因为变量正在选择器中使用（某种程度上）。这是为了避免 Less 编译器将其视为 CSS @ 规则。
此后 .coin:nth-child(@{@]index}) 行再次出现拼写错误。有一个额外的 @ 和一个 ] 大括号。
最后，即使我们忽略 @{i} 和 @{index} 的混淆，代码 animation-name: boom-@{i}; 也会导致问题，因为当您尝试将变量与字符串连接而不包含它们时在引号中它会产生错误。
注意： random(2500)+px不会导致任何编译错误，但是Less中没有内置的random()函数，+是不用于字符串连接（除非您使用的是 seven-phases-max 在评论中提到的 LessPHP）。我认为您可能正在寻找类似 unit(`Math.random(2500)`,px).

.boom (@index) when (@index > 0){
    @keyframes ~"boom@{index}" {
       0% {
          top: 50%;
          left: 50%;
       }
       50%{
          top: random(2500)+px;
          left: random(2500)+px;
       }
   }
    .coin:nth-child(@{index}){
        left: unit(@index * 10, px);
        animation-duration: 2.6s;
        animation-name: ~"boom-@{index}";
        animation-direction: alternate;
        animation-timing-function: ease-in-out;
  }
  .boom(@index - 1);
}
.boom(5);

关键帧循环动画导致编译错误

Keyframe loop animation resulting in compilation error

css

loops

keyframe

less