码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-06-29 21:54:33      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:

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

技术分享

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

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

标签:

原文地址:http://www.cnblogs.com/ermu-learn/p/5628199.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!