Less循环的应用

项目中需要为一组div设置不同的背景背景图片已经切好，编写less代码如下：

.generate-columns(@n,@i:1) when(@i=<@n){
  .Safe .contents .list .item:nth-child(@{i}) .bg1{
    background-image: url("../images/safe-@{i}.png");
  }
  .generate-columns(@n,(@i + 1));
}
.generate-columns(4);

生成css代码如下

.Safe .contents .list .item:nth-child(1) .bg1 {
  background-image: url("../images/safe-1.png");
}
.Safe .contents .list .item:nth-child(2) .bg1 {
  background-image: url("../images/safe-2.png");
}
.Safe .contents .list .item:nth-child(3) .bg1 {
  background-image: url("../images/safe-3.png");
}
.Safe .contents .list .item:nth-child(4) .bg1 {
  background-image: url("../images/safe-4.png");
}

解析：

.generate-columns

其实是一个less函数通过递归实现了循环，通过这个列子掌握了less循环和变量的使用