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;

2 条评论
Moe · 2014年01月15日

卤煮,图片保存的时候最好使用「存储为Web所用格式」。。

回复

RayLiao · 2015年06月17日

e.g $[map]-layout:smart;会把图片都紧凑的压在一起,测试该选项会导致$-spacing失效

有什么解决办法吗?

回复

载入中...
Fakefish Fakefish

4k 声望

发布于专栏

Fakefish

我说的都是错的,除非你证明我是对的。

46 人关注

SegmentFault

一起探索更多未知

下载 App