Weniger Mixin-Iteration unendlich (Kreisschleife)

Question

Wie wiederhole ich eine Mixin-Schleife ohne Stopp? Nehmen wir an, ich habe ein Array mit vier Farben. Wenn es bis zur letzten Farbe iteriert wird, beginnt es mit der ersten Farbe und so weiter und viertens.

Mein Code:

@array: blue, red, green, yellow; 

.color-mix(@i) when (@i > 0) { 
    ul { 
    li:nth-child(@{i}) { 
     .background-color(extract(@array, @i); 
    } 
    } 
.color-mix(@i - 1); 
} 

.color-mix(4); 

nur vier Mal durchlaufen wird, wenn ich mehr Wiederholungen hinzufügen wird es brechen, weil die Farbe-Array nur vier Farben ist, bin ich richtig? Aber wie mache ich eine Endlosschleife?

Answer 1

Sie können dies mit ein wenig Mathematik für den Index, der an die extract-Funktion übergeben wird. Im folgenden Snippet habe ich die mod Funktion verwendet, um sicherzustellen, dass der Index immer zwischen 1 und length(@array) liegt, unabhängig davon, was der Wert @i ist.

Das Mixin passt sich auch an, wenn die Nr. der Werte in der @array Variable erhöht sich, wie ich die Array-Länge anstelle von hart codierenden Werten verwendet habe.

@array: blue, red, green, yellow, orange; 
.color-mix(@i) when (@i > 0) { 
    ul { 
    li:nth-child(@{i}) { 
     @temp: mod(@i - 1, length(@array)) + 1; /* for the cycle */ 
     @color: extract(@array, @temp); /* usage of separate var is personal preference */ 
     .background-color(@color); /* replace mixin with prop-value if mixin does only this */ 
     &:hover{ 
     .background-color(darken(@color, 5.5%)); 
     } 
    } 
    } 
    .color-mix(@i - 1); 
} 

.color-mix(8); /* you can give any number here and it will iterate in a cyclic manner */ 

.background-color(@color){ 
    background: @color; 
} 

---

auch als Sieben-Phasen-max weist darauf hin, richtig in seinem Kommentar, nth-child(an + b) verwendet, ist eine viel bessere Wahl als nth-child(n) für sich wiederholende Muster produzieren (zyklische Schleife).

@array: blue, red, green, yellow, orange; 
.color-mix(@i) when (@i > 0) { 
    ul { 
    @index: unit(length(@array), n) ~"+" @i; 
    li:nth-child(@{index}) { 
     @color: extract(@array, @i); 
     .background-color(@color); 
     &:hover{ 
     .background-color(darken(@color, 5.5%)); 
     } 
    } 
    } 
    .color-mix(@i - 1); 
} 

.color-mix(length(@array)); 

.background-color(@color){ 
    background: @color; 
}