DIV CSS 佈局教程網

1. sprite) {
2. $sprite-offset-x: nth($sprite, 1);
3. $sprite-offset-y: nth($sprite, 2);
4. background-position: $sprite-offset-x $sprite-offset-y;
5. }
7. @mixin sprite($sprite) {
8. @include sprite-position($sprite);
10. @include sprite-width($sprite);
11. @include sprite-height($sprite);
13. }
15. {{#sprite}}
16. {{class}} {
17. background-repeat: no-repeat;
18. overflow: hidden;
19. border: none;
20. background: url('{{{escaped_image}}}?v=#{$version}');
21. @include inline-block();
22. vertical-align: middle;
23. font-style: normal;
24. color:$icon-font-color;
25. }
26. {{/sprite}}
28. {{#items}}
29. .{{name}}{
30. @include sprite(${{name}});
31. }
32. {{/items}}

搞定！就是那麼簡單。

現在只需要把圖片丟到icon文件夾裡面，運行下gulp sprites，就可以生成一張雪碧圖icon.png和相對應的scss樣式文件_icon.sCSS了，也可以再新建一個監聽的任務，監聽icon文件夾，這樣就可以實時生成了。

我把_icon.sCSS貼出來：

1. $icon-QQ: -262px -161px 60px 60px;
2. $icon-email: -332px -161px 60px 60px;
3. $icon-skype: -5px -252px 60px 60px;
4. $icon-phone: -75px -252px 60px 60px;
5. @mixin sprite-width($sprite) {
6. width: nth($sprite, 3);
7. }
9. @mixin sprite-height($sprite) {
10. height: nth($sprite, 4);
11. }
13. @mixin sprite-position($sprite) {
14. $sprite-offset-x: nth($sprite, 1);
15. $sprite-offset-y: nth($sprite, 2);
16. background-position: $sprite-offset-x $sprite-offset-y;
17. }
19. @mixin sprite($sprite) {
20. @include sprite-position($sprite);
22. @include sprite-width($sprite);
23. @include sprite-height($sprite);
25. }
26. .icon {
27. background-repeat: no-repeat;
28. overflow: hidden;
29. border: none;
30. background: url('#{$icon-sprite-path}/icon.png?v=#{$version}');
31. @include inline-block();
32. vertical-align: middle;
33. font-style: normal;
34. color:$icon-font-color;
35. }
36. .icon-QQ{
37. @include sprite($icon-QQ);
38. }
39. .icon-email{
40. @include sprite($icon-email);
41. }
42. .icon-skype{
43. @include sprite($icon-skype);
44. }
45. .icon-phone{
46. @include sprite($icon-phone);
47. }

使用的時候只需要加上類似class="icon icon-QQ"，就可以了。