less 循环

时间:2020-01-31 20:36:45   收藏:0   阅读:68
 // 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));
}

 

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!