less循环不同的背景图片

最近项目接触了less，这里就记录一下写less遇到的小问题，当做备忘，也希望能对看见此文的大家有些许帮助。~~

首先我在写样式的时候觉得一个个的写背景图有些麻烦，想既然是less那就一定会有更加便捷的方法，一搜果不其然就是有方法。

不废话，上代码
加一个前提，就是你的图片命名必须是xxx1，xxx2这样的连续数字命名，不然无法使用变量。

示例代码

//less中的背景图片循环
.nav_r(@navicon) when (@navicon < 4 ) {
    .nav_son@{navicon} {
        background:url("../img/home@{navicon}.png") no-repeat 0 0;
    }
.nav_r(( @navicon + 1 ));// 递归调用自身
}        
.nav_r(1);  

结构代码

//less中的背景图片循环
.你的父类名(@变量) when (@变量 < 你想要循环出来的图片数 ) {
    .子类名@{变量} {
        background:url("../img/图片前缀名字@变量.png") no-repeat 0 0;
    }
.你的父类名(( @变量 + 1 ));// 递归调用自身
}        
.你的父类名(赋值变量);