html页面怎么引用循环,less中使用循环

//下面是less官方文档给的循环实例，其实实际上这就是递归调用

.loop(@counter) when (@counter > 0) {

.loop((@counter - 1));

width: (10px + @counter);

}

//实例

.nav-loop(@counter) when (@counter >0 ) {

&:nth-child(@{counter}) a {

background-image: url("../Image/nav@{counter}.png");

&:hover { color: @color; background-image: url("../Image/nav@{counter}h.png"); }

}

.nav-loop(( @counter - 1 ));// 递归调用自身

}

.nav-loop(8);

//相当于以下代码

&:nth-child(1) a { background-image: url(../Image/nav1.png);

&:hover { color: @color; background-image: url(../Image/nav1h.png); }

}

&:nth-child(2) a { background-image: url(../Image/nav2.png);

&:hover { color: @color; background-image: url(../Image/nav2h.png); }

}

&:nth-child(3) a { background-image: url(../Image/nav3.png);

&:hover { color: @color; background-image: url(../Image/nav3h.png); }

}

&:nth-child(4) a { background-image: url(../Image/nav4.png);

&:hover { color: @color; background-image: url(../Image/nav4h.png); }

}

&:nth-child(5) a { background-image: url(../Image/nav5.png);

&:hover { color: @color; background-image: url(../Image/nav5h.png); }

}

&:nth-child(6) a { background-image: url(../Image/nav6.png);

&:hover { color: @color; background-image: url(../Image/nav6h.png); }

}

&:nth-child(7) a { background-image: url(../Image/nav7.png);

&:hover { color: @color; background-image: url(../Image/nav7h.png); }

}

&:nth-child(8) a { background-image: url(../Image/nav8.png);

&:hover { color: @color; background-image: url(../Image/nav8h.png); }

}