标签：c style class blog code java
各种新技术的出现，推动着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{}
谈谈CSS预处理技术中for循环的应用-CSS Sprite,布布扣,bubuko.com
谈谈CSS预处理技术中for循环的应用-CSS Sprite
标签：c style class blog code java
原文地址：http://www.cnblogs.com/kingwell/p/3767404.html
