使用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值自增。