less.js - Loop список значений

Question

У меня есть 5 цветов и 1 mixin:

@sec-blue: #29a1eb; 
@sec-purple: #3b519f; 
@sec-yellow: #ffda2e; 
@sec-green: #83c99e; 
@sec-brown: #cd9d76; 

.bgcollighten(@col,@per){ 
    @result: lighten(@col, @per); 
} 

и я хочу использовать его на #section, #subsection и #mainelement:

#section{ 
    .bgcollighten(@sec-blue,0%); 
    background-color: @result; 
} 

#subsection{ 
    .bgcollighten(@sec-blue,15%); 
    background-color: @result; 
} 

#mainelement{ 
    .bgcollighten(@sec-blue,30%); 
    background-color: @result; 
} 

Как вы можете см., трудный способ сделать это будет повторять его 5 раз с разными цветами. Есть лучший способ сделать это?

Обновление: Я узнал, что мы можем циклически генерировать класс. Но как его использовать, чтобы закодировать список значений?

Answer 1

я понял, как это сделать:

@bgcollist: #29a1eb, #3b519f, #ffda2e, #83c99e, #cd9d76; 
.generate-sections(5); 

.generate-sections(@n, @i: 1,@j: 1,@k: 1) when (@i =< @n) { 
@col : extract(@bgcollist,@i) ; 
    #section@{i} { 
    .bgcollighten(@col,0%) ; 
    background-color: @result ; 
    } 
    #subsection@{i} { 
    .bgcollighten(@col,15%) ; 
    background-color: @result ; 
    } 
    #mainelement@{i} { 
    .bgcollighten(@col,30%) ; 
    background-color: @result ; 
    } 
    .generate-sections(@n, (@i + 1)); 
}