Compass CSS Sprites和他的小伙伴

在http1的时代（http2有所不同），能够有效减少http请求数，减少网络握手延时，就会对前端的性能提升起到很大的帮助。雪碧图作为一种图片拼合技术，将多个小图合并成一张大图，能够大大节省请求次数和减少图片字节大小，从而成为前端工程师作为性能优化的必做工作。但是在刀耕火种茹毛饮血的前端时代，雪碧图只能手动拼合，实在是一种费时费力爹不疼娘不爱的苦力工作。

本文主要讲述了如何借助compass和其它相关工具自动合成css雪碧图，来解放前端生成力、以及针对雪碧图的应用场景简单说明了图标字体和svg作为替代方案的应用案例。

一，前言介绍为什么叫雪碧图或者精灵图？

sprite/sprait/noun

(in stories) a small creature with magic powers, especially one that likes playing tricks（传说中的）小仙子，小精灵，小妖精

上面简单介绍了sprite这个单词的意思，所以中文翻译为“雪碧图”是出于音译，翻译为“精灵图”是出于意译。

css sprite的优点

减少了网页的http请求，从而大大的提高了页面的性能。

减少图片的字节，3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

css sprite的缺点

手动合并成一张图片。

手动量小图的尺寸。

如果增加、修改或者删除一个小图标呢？难于维护和扩展。

二，实现方式css gaga工具的实现

我们可以借助一些css sprite桌面程序来实现，详细使用方式可以查看这里。

compass sprite的实现（本文重点）

首先，你要安装好ruby、sass和compass的环境。之后打开你最心爱的编辑器写下下面这一段代码，写好之后，我们再来逐行分析这些语句是什么意思。

@charset "UTF-8";$icons-spacing: 0px; // 雪碧小圖的間隔距離$icons-layout: smart; // 雪碧小圖的排列方式$icons: sprite-map( "./path/to/icons/*.png" );@import "compass/utilities/sprites";@import "./path/to/icons/*.png";@include all-icons-sprites;.icon-praise{ @include icons-sprite( praise_default ); @include sprite-dimensions( $icons, praise_default ); &:hover{ @include icons-sprite( praise_hover ); } &.active{ @include icons-sprite( praise_disabled ); }}

指定文件编码

@charset "UTF-8";

当你写的css包含一些中文字符的时候，这时就需要将文件指定为utf-8的编码以保证compass编译不会报Error: Invalid CP950 character “\xxx"的错误。当然，你也可以在config.rb文件里加上这么一行，做到一劳永逸。

Encoding.default_external = 'utf-8'

设置合成后的雪碧小图的间隔和排列方式

$icons-spacing: 0px; // 雪碧小圖的間隔距離$icons-layout: smart; // 雪碧小圖的排列方式

指定要合成雪碧图的所有小图标

$icons: sprite-map( "./path/to/icons/*.png" );

这行是关键代码，compass会自动将icons下的所有图片文件合成到一张图上，并保留这些图片的文件名放到$icons的变量里，以便在后面使用。

导入compass的一些雪碧图工具集

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

compass为开发者提供了很多的工具集，其中sprites就是帮助我们自动实现雪碧图的核心。

终于可以开始愉快的使用了

.icon-praise{ @include icons-sprite( praise_default ); @include sprite-dimensions( $icons, praise_default ); &:hover{ @include icons-sprite( praise_hover ); } &.active{

@include icons-sprite( praise_disabled ); }}

现在我们写了一个icon-praise的class，通过@include icons-sprite( praise_default );将图片包含进来，设定background-image的position；再用@include sprite-dimensions( $icons, praise_default );设置这个class的宽高。

生成的图片大概是这个样子

编译后的css代码

.icon-praise { background-image: url(path/to/icons-s017537717e.png); background-repeat: no-repeat;}.icon-praise { background-position: 0 -602px; height: 76px; width: 76px;}

大功告成，大家快去试试吧。

compass sprite的优点

自动化，爽。

compass sprite的缺点

难以控制小图的确切位置，导致背景动画效果难以掌控。

三，css sprites的小伙伴

另外我们可以使用图标字体和svg实现雪碧图的替代方案，其中图标字体的实现可以利用icomoon这个功能强大的网站帮助我们生成；svg的实现主要是使用了symbol标签，这里水太深，我就不详述了。