使用Compass制做雪碧图

碰见好的文章，笔者也会转载。可是正所谓好记性不如烂笔头，单纯的拿来主义也不如本身的亲自实践。因此每次须要转载的文章，我都会本身敲一遍，中间加入一些本身的思考。
这篇文章转载自：http://www.hongkiat.com/blog/compass-image-sprite/
做者Thoriq Firdaus
译者zEx

前端性能优化，一直是前端开发中很是重要的一环，而其中静态资源特别是图片的优化，又占据了很大的比重。图片优化的方法有不少种，其中很是基本而经常使用的，就是雪碧图。
CSS雪碧图就是将几个图片拼合成一张图片，以此来减小HTTP请求的方法，而且能够提高网站的加载性能。除了使用传统的方法在PS中手动进行拼合以外，还有一些简便的网站或者工具能够帮咱们完成这项工做。
在这里，做者像咱们强烈推荐使用Compass的sprite函数，如今就让咱们来看看，这种方法到底好在哪里。

Compass的安装

要使用Compass，首先要安装它。在这里多说一句，Compass跟SASS的关系，比如jQuery和JavaScript的关系。SASS是基于Ruby环境的，因此：

• 安装Ruby。具体方法请自行搜索。

• Ruby环境内有个包管理器——GEM，它相似于Nodejs下的NPM，它随着Ruby一块儿被安装，所以不须要额外安装。

• 若是国外服务器不给力，也能够把GEM的源换成国内的，好比淘宝：只需执行如下命令：gem sources --add https://ruby.taobao.org/ --remove https://rubygems.org/

• 命令行模式下执行gem install compass，SASS和Compass就能自动安装好了。

注：具体的SASS使用方法请自行搜索。

开始使用Compass

在使用Compass工做以前，咱们须要建立一个Compass项目而后监视它。这样，当这个项目中包含的图片和scss文件一发生改变，Compass就会自动编译成合适的形式。

打开命令行终端，输入如下命令。

compass create /path/to/project
cd /path/to/project
compass watch

合并图片

咱们在images/browsers/文件夹下有一些icon图片，命名为XXX.png

在Compass添加这些icon，咱们能够在.scss文件中使用@import语法指向图片文件夹下的全部png扩展名的图片。就像下面这样：

@import "browers/*.png";

保存文件以后，Compass会将这些图片进行合并，而后生成一个新的图片文件，以下：

雪碧图陈列方向

此外，咱们还能够设置雪碧图排列的方向，正如你刚才看到的图片截屏，图片默认是纵向的。假设纵向排列不能知足要求，咱们能够使用$<map>-layout:horizontal;或者$<map>-layout:diagonal;变量来指定他们水平排列或者对角线排列，将变量中的<map>替换成你存储图片的文件夹的名字。

• 水平排列例子

$broswers-layout:horizontal;
@import "browsers/*.png";

• 对角线排列例子

$broswers-layout:diagonal;
@import "browsers/*.png";

在样式表中添加图片

一旦咱们将图片合并完，咱们就能够在样式表中的背景图中调用它。咱们能够用传统的作法：

.chrome { background-position: 0 0; width: 128px; height: 128px; }   
.firefox { background-position: 0 -133px; width: 128px; height: 128px; }   
.ie { background-position: 0 -266px; width: 128px; height: 128px; }   
.opera { background-position: 0 -399px; width: 128px; height: 128px; }   
.safari { background-position: 0 -532px; width: 128px; height: 128px; }

在Compass中，咱们有更简单的办法，首先，咱们用@include all-<map>-sprites这个语法来生成一些CSS规则。

@include all-browsers-sprites 

当上面编译成正常的css时，除了会生成背景图的声明，还有对应的位置，以下所示：

.browsers-sprite, .browsers-chrome, .browsers-firefox, .browsers-ie, .browsers-opera, .browsers-safari { background: url('/images/browsers-sad8e949931.png') no-repeat; }  
.browsers-chrome { background-position: 0 0; }  
.browsers-firefox { background-position: 0 -128px; }  
.browsers-ie { background-position: 0 -256px; }  
.browsers-opera { background-position: 0 -384px; }  
.browsers-safari { background-position: 0 -512px; }

或者，咱们能够用@include <map>-sprite(image-name)语法将背景图中的某一个对应的位置图片传给指定的选择器，下面是一个例子：

li{
    @include browsers-sprite(safari); 
}

而后，Compass会聪明的识别出图片的位置，不用咱们明确指出，在正常的css中，上面代码会转换成：

.browsers-sprite, li { background: url('/images/browsers-sad8e949931.png') no-repeat; }  
li { background-position: 0 -512px; }

指定容器的尺寸

最后咱们要作的是指定须要显示背景图片的容器的宽高属性。咱们传统的作法是手动查看图片的宽和高（绝大多数状况是经过查看图片信息或图片属性得到）。

使用Compass，咱们能够使用

&height:browsers-sprite-height(safari);
&width:browsers-sprite-width(safari);
li{
    display:inline-block;
    height: $height;
    width: $width;  
    @include browsers-sprite(safari);  
}

当咱们编译上面这些代码，他就会转成下面这些正常的CSS。

.browsers-sprite, li { background: url('/images/browsers-sad8e949931.png') no-repeat; }  
li { display: inline-block; height: 128px; width: 128px; background-position: 0 -512px; }

结论

经过上面的例子，相信读者都已经明白了Compass制做雪碧图的方便之处。实际上，Compass除了这些建立CSS雪碧图的基本函数，Compass还有不少有用的函数能够使用。

英文出处：http://www.hongkiat.com/blog/compass-image-sprite/

中文译文：http://www.w3cplus.com/preprocessor/compass-image-sprite.html