How can I loop through a list of values in Less?

Question

I have 5 colors and 1 mixin:

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

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

and I want to use it on #section, #subsection and #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;
}

As you can see, the hard way of doing this will be I repeat it for 5 times with different colors. I found out that we can loop to generate class. But how to use it to loop a list of values?

Answer 1

I figured out how to do it:

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