less-循环写法

less 的循环函数写法

原理：递归调用函数

//定义一个循环  初始化i=0,循环体内i+1,条件i<10内 满足条件
   @i:0;
.loop(@i)when(@i<10)
{
//递归调用 达到循环的目的
     .loop((@i+1));
//执行某个需要循环的方法
    .addclass(@i);
  
}
//初始化开始循环 不初始化 不会开始循环
.loop(@i);

　　实际运用

更换换背景图

.loop(@counter) when (@counter<=4) {
    .loop(@counter+1);
    div:nth-of-type(@{counter}) {
        @imgUrl: "https://gt.com/@{counter}.png";
        background-image:url("@{imgUrl}");
    }
}
.loop(1);