//下面是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); }
    }