LESS Mixin for 循环答案

【问题标题】：LESS Mixin for loopLESS Mixin for 循环
【发布时间】：2017-05-05 16:51:51
【问题描述】：

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

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

.. 进入一些 LESS mixin，将每次迭代的动画延迟函数值设置为 +20，而下一个 nth-child (+1) 将作为目标，具有最大迭代。

非常感谢！

【问题讨论】：

标签： css loops less iteration

【解决方案1】：

如果我们将每个迭代实例乘以 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 上的示例。

【讨论】：

谢谢！这是一个很好的解决方案。

【解决方案2】：

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;
}

【讨论】：