首页 > 代码库 > 谈谈CSS预处理技术中for循环的应用-CSS Sprite

谈谈CSS预处理技术中for循环的应用-CSS Sprite

2024-07-07 01:52:43   224人阅读

各种新技术的出现，推动着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{}

 


联系
我们