less - 如何循环遍历 Less 中的值列表？

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