less 循环函数使用

60 阅读1分钟

lese 循环函数使用

@colors: #ff7daa, #b388fe, #8c9eff, #ea80fc;
.forFunc(@list, @code) {
  & {
    .loop(@i:1) when (@i =< length(@list)) {
      @value: extract(@list, @i);
      @code();
      .loop(@i + 1);
    }
    .loop();
  }
}
// 示例:
 .parentclass {
    .forFunc(@colors,{&.child@{i}{ border: 1px solid @value;}});
  }
// 生成结果
.parentclass.child1{
    border: 1px solid #ff7daa;
}
.parentclass.child2{
    border: 1px solid #b388fe;
}
.parentclass.child3{
    border: 1px solid #8c9eff;
}
.parentclass.child4{
    border: 1px solid #ea80fc;
}