使用less函数实现不同背景的CSS样式

Posted 2020-08-01 Ermu丨

今天在公司遇到一个比较特殊的需求，需要完成这样的布局，如下图：

每一个块的背景需要不同，而其他都是相同的，这时候就应该把背景提出来单独写成一个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值自增。