CSS Sprites雪碧图技术基础学习指南

引言
雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更加友好。

实现
假设我们通过.toolbtn的类，为应用该类的各元素提供一张背景图片：

1. <style> .toolbtn {background:url(myfile.png); display:inline-block; height:20px; width:20px } </style>  

背景位置，可以通过在background的url()直接定义X,Y轴的值，或者通过background-position属性来添加。例如：

1. <style>   
2. #btn1 {background-position: -20px 0px}   
3. #btn2 {background-position: -40px 0px}   
4. </style>  

id=btn1的元素背景左移20px，id=btn2的元素背景左移40px（假设这两个元素的都添加了toolbtn类，应用了上面样式定义的图片效果）

类似的，你也可以使用下面的方式添加hover的状态：

1. #btn:hover {background-position: [pixels shifted rightright]px [pixels shifted down]px;}  

CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染(值得一提的是，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签)。

使用css-sprite雪碧图工具
可能是最好用的雪碧图工具了，好吧，至少是我用过最好用的。

首先安装css-sprite，安装这里很坑，等我最后再说。

全选复制放进笔记var gulp = require('gulp');

1. var gulpif = require('gulp-if');   
2.   
3. gulp.task('sprites',function(){   
4.     gulp.src('img/icon/*.png')                  //这是要合并的图片的路径   
5.         .pipe(sprite({   
6.             name: 'icon',                       //定义一个名称   
7.             style: '_icon.scss',                //这是生成的样式文件   
8.             format: 'png',                      //png格式的图片   
9.             orientation: 'left-right',          //雪碧图合并的方向，也可以设置成垂直或水平   
10.             cssPath: '#{$icon-sprite-path}',    //雪碧图的路径变量   
11.             template: './sprite-tpl.mustache',  //scss生成的模板   
12.             processor: 'scss'                   //生成的样式文件的格式   
13.         }))   
14.         .pipe(gulpif('*.png', gulp.dest('img/'), gulp.dest('css/')));   
15. });  

scss的模板使用mustache：

1. {{#items}}