Sass 使用中有一个 Amazing 的功能，配合着 compass 能够做出非常多高效的工作，首当其冲的就是自动化雪碧图工具。
雪碧图自然不用多说，做过前端的开发都知道雪碧图。好处呢在于能够大大节约网络的开销，把Http请求降低。自然在原来的前端开发中，制作的成本也是偏高。环境安装请看这里?http://www.html-js.com/article/CSS-solves-the-installation-and-debugging-of-SASSCompass-scheme
环境Ok之后，通过命令确认安装完毕。
创建工程请执行 compass create app
Compass自动为我们生成了相关的文件目录。好吧，开搞！进入项目目录，运行 compass watch 来实施监控文件发生的变化。实施编译Sass。 之后写入这样的代码段。
@import "compass/reset";
//通过在SASS文件中使用import来自动生成雪碧图
/*
首先声明布局模式4种
vertical 垂直
horizontal 水平
diagonal 对角线
smart 智能排列
*/
$toolbar-layout: 'smart';
//包含的文件夹路径
@import "../images/icons/*.png";
//混合宏sprites，COMPASS内置方法，能够通过文件名
//来生成相应的CSS代码片段
@include all-icons-sprites;
@mixin icon-base($icon_name){
display: inline-block;
margin: 10px;
text-indent: -9999px;
@include icons-sprite($icon_name);
}
//图标iphone
.iphone_icon{
width: 256px;
height: 256px;
@include icon-base(iphone);
}
//图标B
.login_icon{
width: 100px;
height: 25px;
display: block;
@include icon-base(login);
}
然后他会根据规则生成响应的Css文件。
通过观察，我们不难发现，原来image文件中的文件名，就是class样式中的名字，规则是根据 “文件夹-文件”这样的规则生成。
这样应用起来是不是很快呢？
这种写法一个需要注意的地方就是在于文件夹和文件的放置位置。SASS生成的代码完全是根据文件夹和文件的位置决定的。更好的规划图片当然能够获得更加易读的代码。比如：
Image根目录
|___ icon
|____ icona.png
|____ iconb.png
|___ banner
|_____ a.png
|_____ b.png
对应的Sass语法则是
@include all-icons-sprites;
@include all-banner-sprites;
//在这里我们使用B
div{
@include banner-sprite(a);
}
源代码和注释已上传，有需要的朋友可以下载研究。