如何循环遍历 Less 中的值列表？答案

【问题标题】：How can I loop through a list of values in Less?如何循环遍历 Less 中的值列表？
【发布时间】：2021-07-24 03:08:30
【问题描述】：

我有 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 次。我发现我们可以循环生成类。但是如何使用它来循环一个值列表呢？

【问题讨论】：

标签： less less-mixins

【解决方案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));
}

【讨论】：