Минус итерации бесконечности (круговая петля)

Question

Как пропустить микс-петлю без остановки? Предположим, у меня есть массив с четырьмя цветами. Когда он перебирается до последнего цвета, он начинается с первого цвета и так далее и четвертого.

Мой код:

@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); 

будет только перебирать в четыре раза, если я добавляю больше итераций будет ломаются, потому что цвет-массив только четыре цвета, я правильно? Но как мне сделать бесконечный цикл?

Answer 1

Вы можете сделать это, используя бит математики по индексу, который передается функции extract. В приведенном ниже фрагменте я использовал функцию mod, чтобы убедиться, что индекс всегда находится между 1 до length(@array), независимо от того, что значение @i есть.

Смесин будет адаптироваться, даже если нет. значений в переменной @array увеличивается, поскольку я использовал длину массива вместо значений жесткого кодирования.

@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; 
} 

---

Кроме того, как семь-фазы-макс правильно указывает в своем комментарии, используя nth-child(an + b) является гораздо лучшим выбором, чем nth-child(n) для производства повторяющихся паттернов (циклический петли).

@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; 
}