LESS Mixin for loop

Question

I was wondering what is the most efficient way to write this:

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

.. into some LESS mixin that will set the animation-delay function value to +20 every iteration, while the next nth-child (+1) will be targeted, with a max iteration.

Thanks so much!

Answer 1

Looking at the docs I'd say it would look like:

.foo(4);

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

Tested with LESS2CSS using animation-delay property instead of your function:

.foo(4);

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

Generates:

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