LESS Mixin for loop

Question

我想知道写这个的最有效方法是什么：

&:nth-child(1){   .animation-delay(100ms); }
&:nth-child(2){   .animation-delay(120ms);  }
&:nth-child(3){   .animation-delay(140ms);  }

..进入一些LESS mixin，它将动画延迟函数值设置为每次迭代+20，而下一个n-child（+1）将被定位，并进行最大迭代。

非常感谢！

Answer 1

Looking at the docs我说它看起来像是：

.foo(4);

.foo(@n, @i: 1) when (@i =< @n) {
  &:nth-child(@{i}) {
    .animation-delay(100ms + (@i * 20));
  }
  .foo(@n, (@i + 1));
}

使用animation-delay属性而不是您的函数使用LESS2CSS进行测试：

.foo(4);

.foo(@n, @i: 1) when (@i =< @n) {
  &:nth-child(@{i}) {
    animation-delay: (100ms + (@i * 20));
  }
  .foo(@n, (@i + 1));
}

生成：

:nth-child(1) {
  animation-delay: 120ms;
}
:nth-child(2) {
  animation-delay: 140ms;
}
:nth-child(3) {
  animation-delay: 160ms;
}
:nth-child(4) {
  animation-delay: 180ms;
}

Answer 2

如果我们采用迭代的每个实例并将其乘以20，我们得到所需的20步增量。由于我们需要从100ms开始，起点需要是80ms（80 + 1 * 20）。

@iterations: 5;

.mixin-loop (@i) when (@i > 0) {
  &:nth-child(@{i}) {
    animation-delay: 80 + @i * 20ms;
  }
  .mixin-loop(@i - 1);
}

.test { 
  .mixin-loop(@iterations);
}

CodePen上的示例。