使用less的loop（循环）方法根据类名生成元素

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);
}

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