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