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