less是一个功能强大的css超集，可以方便我们进行css代码的书写，less具有很多现代语言的特性，而不是简单的标记语言，包括分支和循环，这里我们使用循环来进行元素的自动化生成。

下面的代码需要一些less知识：less中文网

有时我们需要生成这样一个元素：

<div class="item introduction"> 
    <div class="split-intro intro-1"></div>
    <div class="split-intro intro-2"></div>
    <div class="split-intro intro-3"></div>
    <div class="split-intro intro-4"></div>
 </div>

虽然这里可以使用ul 来生成一个列表，但是有些时候这些元素里面会放置一些其他的div 所以这里就暂时不用列表了。 我们现在需要对这4个嵌套的div 元素添加各自的背景图片。如果在原生的css中，我们可能会这样写：

.introduction .intro-1 { background-image: url("######.jpg");}
.introduction .intro-2 { background-image: url("######.jpg");}
.introduction .intro-3 { background-image: url("######.jpg");}
.introduction .intro-4 { background-image: url("######.jpg");}

这里需要手动指定这四个元素的背景图片，在元素较少的时候，或者是页面不需要修改的时候这样做似乎没什么问题，但是我们在修改的时候需要一个一个修改这些元素背景图片的url，并且如果是很多个元素的话就很麻烦。这里可以使用less的循环来实现简单的设置。

//定义
.intro-loop(@n, @i:1) when (@i <= @n) {
.intro-@{i} {
img { background-image: url("../images/intro-@{i}.jpg"); }
}
.intro-loop(@n, (@i + 1));
}
//调用
.introduction { .intro-loop(4);}
//下面是less官方文档给的循环实例，其实实际上这就是递归调用.
loop(@counter) when (@counter > 0) {
.loop((@counter - 1));
width: (10px + @counter);
}

这样就可以很快的修改图片路径，或者增添新的元素进去了。