compass之sprite初接触

compass的sprite就是让一个文件夹下的所有icon自动合并成一个临时的大图。

所有icon必须是非交错的png，否则会报没有unpack属性的错误，非交错就是用ps保存png的时候，会有

的选项
搜索了一天，发现没办法同时合并多个文件夹到一个图片上。https://github.com/chriseppstein/compass/issues/800

---

基本设置
比如目前my-icons有4张图片
images/my-icons/new.png
images/my-icons/edit.png
images/my-icons/save.png
images/my-icons/delete.png
然后在scss文件中

@import "compass/utilities/sprites";
@import "my-icons/*.png";
@include all-my-icons-sprites;

就可以用.my-icons-delete使用delete的背景图片

或者 可以用这种

@import "my-icons/*.png";

.actions {
  .new    { @include my-icons-sprite(new);    }
  .edit   { @include my-icons-sprite(edit);   }
  .save   { @include my-icons-sprite(save);   }
  .delete { @include my-icons-sprite(delete); }
}

这样看起来更舒服点

---

选项
- $<map>-spacing合成图片之间的margin e.g $icon-spacing: 20px
- $<map>-repeat背景图片的重复like $icon-repeat: repeat-x
- $<map>-position背景定位，比如100%，就是把图片都往右边靠，宽度为最大的那张
- $<map>-clean-up是否在每次创建新的图片时，删去旧的图片
- $<map>-sprite-dimensions
$<map>-sprite-base-class
$<map>-<sprite>-spacing
$<map>-<sprite>-repeat
$<map>-<sprite>-position
没明白什么用

---

有组成方式的选项
选项必须放在该import前面
$[map]-layout属性有Vertical(default,竖着放),Horizontal(横着放),Diagonal(从右上到左下),Smart(紧凑)
e.g $[map]-layout:smart;会把图片都紧凑的压在一起，测试该选项会导致$<map>-spacing失效

---

比如要给一个a加入4种状态时候的图片，e.g
icons:
my-buttons/glossy.png
my-buttons/glossy_hover.png
my-buttons/glossy_active.png
my-buttons/glossy_target.png

@import "my-buttons/*.png";

a {
  @include my-buttons-sprite(glossy)
}

a标签就自动获得4个状态的样式
要关闭这个功能在include前面加$disable-magic-sprite-selectors:true;