less中使用循环
jianfly.com 2019-01-31 2927次浏览
//下面是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); } }