相信大家在前端开发这条路不归路上，都为此头疼过，干这件事情不仅费时费力还费眼睛，各种辅助线打上、网格划上，处处精确到像素级别，长期下来想必大家也都有像素对齐强迫症了，唉……说多了都是泪。那就是今天的主角 - 雪碧图（image spriting），至于他的介绍，他的好，他的工作原理也就不必多说了。
不过今天要介绍的新东西，或许能然你不在重操这些枯燥无味的动作，简单配置之后，一切就那么随意的，先放上官方的教程 Compass Sprite，下面重点介绍我的个人实践和一些使用经验。
文件准备
这里我找了 5 枚 24x24 的 Glyphicons 图标，icons 文件夹里放要拼合的图片资源
1
2
3
4
5
6
7images/
├── icons/
│ ├── bell.png
│ ├── tree.png
│ ├── table_tennis.png
│ ├── globe.png
└── └── briefcase.png
简单实践
1 | // ------ style.scss ------ |
代码部分就是这些了，看一下之前的目录结构，发现在指定的图片文件夹 images 里已经生成了拼合好的雪碧图 icons-sbf1475184a.png，文件命名是由“指定部分-hash string”，每次在源图片改变时，更新缓存编译之后会生成新的雪碧图。
这里再补充一下，官方文档里还导入了 sprite 组件，个人在使用中发现会报错，就去除了。编译时通过 compass command 是没有任何问题的。Compass Command Line Documentation
大概是和当前项目配置文件有关，所以建议在没有配置文件的前提下，先用 creat 命令创建项目，在对配置文件进行相应的更改。我是在 grunt-compass 中处理的，没有单独进行这些操作。
关于编译时路径报错，可以在 config.rb 里根据自己的需求，添加或更改配置项。Application Integration
手动指定类名
有时候会遇到这种情况，带有雪碧图属性的 class 自身还有其余属性，就需要单独去定义。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15// ------ style.scss ------
@import "icons/*.png";
.icons-bell {
@include icons-sprite(bell); // 注意 mixin 的名称要一致
}
// ------ style.css ------
.icons-sprite, .icons-bell {
background: url('../images/icons-sbf1475184a.png') no-repeat;
}
.icons-bell {
margin: 0 auto 30px;
background-position: 0 -48px;
}
// 省略部分
但是从生成的雪碧图，我看到的仍然将整个文件夹里的全部生成了，这里作为标记，等我去查查资料。
个性配置
输出布局 Sprite Layouts
从图中我们可以看到，默认输出的雪碧图是按各个图片，垂直排列的。Compass 提供了：Vertical,Horizontal,Diagonal,Smart，默认以 Vertical 输出。1
$icons-layout: smart; // {文件夹名称}-layout
控制间距
为每个图片加入空白间隙，此处指定为10px1
$icons-spacing: 10px;
自动获取当前图片的尺寸
1
$icons-sprite-dimensions: true;
配置语句，都写在最前。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28// ------ style.scss ------
$icons-sprite-dimensions: true;
$icons-spacing: 10px;
$icons-layout: horizontal;
@import "icons/*.png";
@include all-icons-sprites;
// Command
>>> Change detected at 23:04:38 to: sass-color.scss
remove images/icons-sfcd98984f1.png
create images/icons-s274ef0b305.png
overwrite css/sass-color.css
// ------ style.css ------
.icons-sprite, .icons-bell, .icons-briefcase, .icons-globe, .icons-table_tennis, .icons-tree {
background: url('../images/icons-s274ef0b305.png') no-repeat;
}
.icons-bell {
background-position: 0 0;
height: 24px;
width: 24px;
}
.icons-briefcase {
background-position: -44px 0;
height: 21px;
width: 24px;
}
// 省略部分
