标签：
今天在公司遇到一个比较特殊的需求，需要完成这样的布局，如下图：
每一个块的背景需要不同，而其他都是相同的，这时候就应该把背景提出来单独写成一个CSS样式类。
那么问题来了，有四个不同的背景需要写4个基本重复的CSS样式类，要是有更多的背景呢？如何避免这种重复的操作？
幸运的是，公司的底座使用less来编辑CSS样式的，于是今天用了一个小时的时间来研究如何使用less来简化上面这种重复的操作。
具体代码如下：
//less中的背景图片循环 .bgimgwhile(@counter) when (@counter < 5 ) { .bgimg-@{counter} { background:url("../images/bgimg-@{counter}-3x.png") no-repeat 0 0; background-size: cover; } .bgimgwhile(( @counter + 1 ));// 递归调用自身 } .bgimgwhile(1);
讲解一下其中的代码方便以后使用。
整个方法的原型为：
.funName(@counter) when (@counter < max ) { .className { propertyName: valuel; } .funName(( @counter + 1 ));// 递归调用自身 } .funName(1);
其中需要注意的是，必须在函数内部调用自身，以实现@counter值自增。
标签：
原文地址：http://www.cnblogs.com/ermu-learn/p/5628199.html
