各种新技术的出现,推动着Web前端技术飞速发展,在提升用户体验的同时也方便开发者;
在前端优化时,我们使用CSSSprite技术,把多个图片合在一张图片上,然后通过background-image,background-position来定位现实不同效果,这样来达到减少HTTP请求,毕竟HTTP请求是相当昂贵的,但是HTTP请求是少了,开发人员工作量就大了,要定位图片不是一件很方便的事情,非常麻烦,要一个一个地计算:
其实我们可以有点技巧,让图片排列有点规律,这样可以减少大量时间:
假如我们的图片是规律的,如每个区域高都是30px,这样我们可能通过结合Sass里for来快速现实对图片的定位:
scss:
@for $i from 0 to 17{ .d-icon-#{$i}{ background-position: -0 -#{+ $i*30}px; }}
编译结果:css
.d-icon-0 { background-position: 0 -0px; }.d-icon-1 { background-position: 0 -30px; }.d-icon-2 { background-position: 0 -60px; }.d-icon-3 { background-position: 0 -90px; }.d-icon-4 { background-position: 0 -120px; }.d-icon-5 { background-position: 0 -150px; }.d-icon-6 { background-position: 0 -180px; }.d-icon-7 { background-position: 0 -210px; }.d-icon-8 { background-position: 0 -240px; }.d-icon-9 { background-position: 0 -270px; }.d-icon-10 { background-position: 0 -300px; }.d-icon-11 { background-position: 0 -330px; }.d-icon-12 { background-position: 0 -360px; }.d-icon-13 { background-position: 0 -390px; }.d-icon-14 { background-position: 0 -420px; }.d-icon-15 { background-position: 0 -450px; }.d-icon-16 { background-position: 0 -480px; }.d-icon-17 { background-position: 0 -510px; }.d-icon-18 { background-position: 0 -540px; }.d-icon-19 { background-position: 0 -570px; }
无论多少个图片,使用Sass一句话搞定,不是方便,是相当方便。
这里使用了@for $i from a to b;还是一种是@for $i from a through b;$i是一个变量,自己随便取,从a到b,to,through的区别是to 不包括b,through包括b,上面的例子,如果使用through,将多一个.d-cions-20{}
联系客服