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

每一个块的背景需要不同,而其他都是相同的,这时候就应该把背景提出来单独写成一个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样式的更多相关文章

  1. 关于jquery中用函数来设置css样式

    关于jquery中用函数来设置css样式 2016-12-21 23:27:55 1.jquery语法 $(selector).css(name,function(index,value)) name ...

  2. 关于获取、设置css样式封装的函数入门版

    <html> <head> <meta charset="UTF-8"> <title>CSS样式的获取和设置:简单版</ti ...

  3. (转载)记录函数 getStyle() 获取元素 CSS 样式

    设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...

  4. css样式之背景图片

    1.css样式背景之使用图片来做为背景 example: <!DOCTYPE html> <html> <head> <meta http-equiv=&qu ...

  5. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  6. JQuery DOM操作 、属性和CSS样式操作、其他函数

    DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...

  7. 新手如何更换自己喜欢的背景以及此背景的css码

    以下内容为转载(对于css码可以自己写当然也可以去网上搜现成的): 更换背景教学:https://jingyan.baidu.com/album/fc07f9897c730412ffe519c0.ht ...

  8. js函数arguments与获取css样式方法

    函数传参,当参数的个数不定时,可以使用arguments:表示实参集合 arguments.length=实参个数 获得css样式方法: getComputedStyle()方法---->得到的 ...

  9. css的基本操作学习--css样式,选择器,hover,文字属性,文本属性,背景

    什么是css? 通配符选择器 <head> /* *通配符选择器 匹配任何元素 */ *{ margin: 0; padding: 0; } </head> css样式有三种 ...

随机推荐

  1. php pack、unpack、ord 函数使用方法

    string pack ( string $format [, mixed $args [, mixed $... ]] ) Pack given arguments into a binary st ...

  2. 【HDOJ】2757 Ocean Currents

    简单BFS. /* 2757 */ #include <iostream> #include <queue> #include <cstdio> #include ...

  3. 【HDOJ】2289 Cup

    二分.另外,圆台体积为v = PI*(r*r+r*R+R*R)*H/3.注意精度. #include <cstdio> #include <cmath> #define exp ...

  4. GitHub的5人骨干小组:早期初创公司该如何招到正确的人

    转自:http://news.cnblogs.com/n/190924/ 前 5 年对初创公司来说至关重要,根据美国中小企业发展署的数据,大约 1/4 的初创公司在第一年内关门大吉,只有不到一半的企业 ...

  5. 【转】eclipse -- the project was not built due to a resource exists with a different case...

    原文网址:http://blog.csdn.net/mylinx/article/details/44280563 进行编码时,工程前面莫名有个红X,正当百思不得其解时,发现在[problems]下有 ...

  6. 图论(网络流):[SDOI2010] 星际竞速

    Description 10 年一度的银河系赛车大赛又要开始了.作为全银河最盛大的活动之一,夺得这个项目的冠军无疑是很多人的梦想,来自杰森座 α星的悠悠也是其中之一. 赛车大赛的赛场由 N 颗行星和M ...

  7. 图论(网络流):SPOJ OPTM - Optimal Marks

    OPTM - Optimal Marks You are given an undirected graph G(V, E). Each vertex has a mark which is an i ...

  8. 自己做的网页页面导航浏览JS/JQuery

    需求: 当页面是由一个巨大的表格构成时,浏览器自动会出现纵向和横向滚动条,这时用户浏览页面会出现很蛋疼的感受,那就是恶心的横向滚动条! 为了减缓这种蛋疼的感觉,我尝试做了这个导航器(不知道如何称呼), ...

  9. zoj 2404 最小费用流

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2404 #include <cstdio> #incl ...

  10. winscp自动执行脚本

    我们经常使用WinSCP工具通过sftp协议上传获取文件,本文描述通过bat批量处理文件. 首先,我们打开dos命令窗口使用 cd \d :D\WinSCP 打开WinSCP安装目录 上传文件: wi ...