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()函数，+不用于字符串连接（除非你在评论中使用7-phase-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);

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

1 个答案: