码迷,mamicode.com
首页 > 其他好文 > 详细

less 循环

时间:2020-01-31 20:36:45      阅读:68      评论:0      收藏:0      [点我收藏+]

标签:app   extra   ORC   length   loop   round   rac   code   ecc   

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

 

less 循环

标签:app   extra   ORC   length   loop   round   rac   code   ecc   

原文地址:https://www.cnblogs.com/mary-123/p/12246498.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!