使用less函數實現不同背景的CSS樣式

今天在公司遇到一個比較特殊的需求，需要完成這樣的布局，如下圖：

每一個塊的背景需要不同，而其他都是相同的，這時候就應該把背景提出來單獨寫成一個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值自增。