less 循环

Posted 2021-03-13 mary-123

 // colors
@colors: darkslateblue mediumorchid seagreen steelblue;

// loop definition
.backgrounds(@list, @i: 1) when (@i <= length(@list)) {
  // extract the right color from the list
  @color: extract(@list, @i);
  // apply the background to the selector
  .@{color} {
    background: @color;
  }
  // recursive call for the next color
  .backgrounds(@list, @i + 1);
}
// application
.backgrounds(@colors);

示例

@colors: #3498DB,#3FB17C,#F1C40F,#E74C3C,#1ABC9C,#34495E,#E67E22,#D74177,#6884F6,#2ECC71,#9B59B6,#95A5A6;

.colors(@i: length(@colors)) when (@i > 0) {
  @color: extract(@colors, @i);
  &-@{i} {
    background-color: @color;
  }
  .colors((@i - 1));
}