МЕНЬШЕ Mixin цикл

Question

мне было интересно, что является наиболее эффективным способом, чтобы написать это:

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

.. в какой-то МЕНЬШЕ Mixin, которая установит значение функции анимации задержки до +20 каждой итерации, в то время как следующий nth-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)); 
} 

Испытано с LESS2CSS использованием animation-delay свойства вместо вашей функции:

.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 шагов. Поскольку нам нужно начинать с 100 мс, отправной точкой должно быть 80 мс (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.