WENIGER Mixin für Schleife

Question

Ich frage mich, was der effizienteste Weg, dies zu schreiben:

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

.. in einige weniger mixin, das die Animation-Delay-Funktion Wert auf +20 jede Iteration eingestellt werden, während die Das nächste n-te Kind (+1) wird mit einer maximalen Iteration abgezielt.

Vielen Dank!

Answer 1

Looking at the docs Ich würde sagen, es aussehen würde:

.foo(4); 

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

Getestet mit LESS2CSS mit animation-delay Eigenschaft statt Ihrer Funktion:

.foo(4); 

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

Erzeugt:

: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

Wenn wir jede Instanz der Iteration nehmen und mit 20 multiplizieren, erhalten wir die 20 Schritte, die wir brauchen. Da wir bei 100ms beginnen müssen, muss der Startpunkt 80ms (80 + 1 * 20) sein.

@iterations: 5; 

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

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

Beispiel für CodePen.