How do I iterate a mixin-loop without stop? Let's say I have an array with four colors. When it iterate to the last color, it begins with the first color and so on and fourth.
My 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);
Will only iterate four times, If I add more iterations it will break because the color-array is only four colors, am I correct? But how do I do an infinite loop?
You can do this using a bit of math on the index that is passed to the extract
function. In the below snippet, I've used the mod
function to make sure the index is always between 1 to length(@array)
irrespective of what the value of @i
is.
The mixin will adapt even if the no. of values in the @array
variable increases as I've used the array length instead of hard-coding values.
@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;
}
Also as seven-phases-max correctly points out in his comment, using nth-child(an + b)
is a much better choice than nth-child(n)
for producing repeated patterns (cyclic loop).
@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;
}