导入compass sprites的功能包，
@import "compass/utilities/sprites";
第一步：设置icon合并后图片的间距
设置需放在载入图片文件夹之前,
$sprites-spacing: 10px;
有时需要对部分小图标设置不一样的边距，可以以单个icon的名字指定
$sprites-loading-spacing:20px;
其中，sprites为文件夹名，loading为小icon名。第二步：设置图片的排列方式
设置需放在载入图片文件夹之前
$sprites-layout:vertical;
取值有四种，vertical/horizontal/diagonal/smart，字面意思，垂直、水平、对角、智能（能生成较小的图片大小）第三步：设置样式中背景的定位所相对的点坐标，默认是（0，0）
设置需放在载入图片文件夹之前
$sprites-position:100px,100px;
这样生成的样式中，定位在图片（100px，100px）的坐标值为（0，0）第四步：设置是否开启魔术精灵
设置需放在载入图片文件夹之前， 默认为开启的，也就是会把以_hover,_active结尾的前缀相同的图标，当成一个元素的几个交互状态，生成相应的：hover,：active等样式,如果不需要这个功能，可以关闭，设置如下：
$disabled-magic-sprite-selector:false;
第五步：设置生成样式的名字
设置需放在载入图片文件夹之前， 默认会以图片文件夹的名字做为生成样式中引用该sprite背景的样式名，如果想另外命名，可以设置
$sprites-sprite-base-class:".myclass";
以上设置可有可无！！！！！
做完设置后，需要载入存放背景图的文件夹中的图片，
@import "sprites/*.png";
这时图片就合并好了，但还没样式，有些设置需要在载入图片后设置：第一步：设置是否要重复背景
$sprites-repeat:no-repeat;
当然有时我们只需要重复部分图片背景，可以设置成：
$sprites-loading-repeat:repeat-x;
其中loading为重复的图标名第二步：设置生成单个icon的尺寸
其实，一般情况下，我们是需要指定所有生成的icon样式的大小的，但默认却是关闭的，所以通常需要打开
$sprites-sprite-dimensions: true;
单一图片大小可以设置成：
$sprites-sprite-width($loading)
其中loading为需要设置大小的icon;第三步：设置是否在图片改变时重新生成sprites
默认是开启，当需要关闭时可以设置：
$sprites-clean-uo:false
这样，就只保留旧图了以上引入图片包后的设置通常除了开启生成尺寸外，其余可有可无。。。
关键的来了：真正生成合并图及样式
@include all-sprites-sprites;
这样，合并图及样式就都生成了，其中，第一个sprites是图片文件夹名，第二个是命令规定的。当只生成单个样式时，可以指定：
@include sprites-sprites(point_hover);
有时需要重新覆盖一个生成的样式，可以指定：
.out{
@include sprites-sprites(loading);
sprites-sprite-width(loading);
}
特殊说明
sprites虽好，但移动端常用双倍图，还没有找到倍数的设置呢，只好曲线救国：
- 制作双倍icon文件
- 制作单倍icon文件
- 用单倍的文件夹名做一次样式生成
-
用双倍的文件夹名做一次载入（目的是为了生成双倍的合并图），
@import "sprites_big/*.png";sprites_big是存放双倍icon的文件夹，这句之后在文件夹的同级目录中生成双倍合并图
- 需要注意的时，保持相关设置的对应，比如小图文件夹有间距设置时，大图文件夹也要有，
$sprites_big-spacing: 20px;其中，20px是小图设置的2倍
-
最后，背景大小是一定要指明的，当然已经有小的合并图，尺寸照抄就行：
[class^="sprites-"]{ background-size:25px auto; }