compass自动生成背景icon样式

导入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); width: sprites-sprite-width(loading); }

特殊说明

sprites虽好，但移动端常用双倍图，还没有找到倍数的设置呢，只好曲线救国：

1. 制作双倍icon文件
2. 制作单倍icon文件
3. 用单倍的文件夹名做一次样式生成
4. 用双倍的文件夹名做一次载入（目的是为了生成双倍的合并图），
   @import "sprites_big/*.png";
   sprites_big是存放双倍icon的文件夹，这句之后在文件夹的同级目录中生成双倍合并图
5. 需要注意的时，保持相关设置的对应，比如小图文件夹有间距设置时，大图文件夹也要有，
   $sprites_big-spacing: 20px;
   其中，20px是小图设置的2倍
6. 最后，背景大小是一定要指明的，当然已经有小的合并图，尺寸照抄就行：
   [class^="sprites-"]{ background-size:25px auto; }