CSS Image Sprite是一种将多个图像组合到一个图像文件中的方法，以减少HTTP请求并优化Web负载性能 。 有很多方法和方便的工具可以执行此操作，否则您也可以使用Photoshop传统上执行此操作。
但是，根据我处理CSS Image Sprite的全部经验，没有比使用Sprite Function for Compass容易得多的方法。 因此，让我们看一下它是如何工作的。
推荐读物 ： 语法很棒的样式表：在Sass中使用指南针
启动指南针
在使用Compass代码之前，我们需要创建Compass项目watch。 因此，每当项目（包括图像和.scss发生更改时，Compass都会将其编译为适当的格式。
让我们打开终端或命令提示符（如果您在Windows上），然后运行以下命令。
compass create /path/to/project cd /path/to/project compass watch
合并影像
如上所述，您可以使用Photoshop手动加入图像，也可以使用一些方便的工具，例如SpriteBox 。 指南针将此功能集成到功能中。 假设我们在images / Browsers / <images> .png文件夹下有以下图标。
要在Compass中加入这些图标，我们可以使用@import规则，然后将其定向到图像文件夹，然后通过.scss样式表将其扩展为图像，如下所示
@import "browsers/*.png";
保存文件后，Compass将合并这些图像并生成新的图像文件，如下所示。
布局方向
此外，我们还可以设置精灵方向。 如您在上面的屏幕快照中所见，默认情况下图像是垂直排列的。 如果垂直方向不适合这种情况，我们可以使用以下变量$<map>-layout: horizontal;将它们水平或对角$<map>-layout: horizontal; 或$<map>-layout: horizontal; 将<map>替换为保存图像的文件夹名称。
卧式
$browsers-layout:horizontal; @import "browsers/*.png";
对角线
$browsers-layout:vertical; @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-<map>-sprites; 。 将<map>替换为我们存储图像的文件夹。
@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-naem);语法将背景图像单独添加到特定选择器中@include <map>-sprite(image-naem); ; 就像以前的代码一样，将<map>替换为我们存储这些图像的文件夹。 这是一个例子。
li {
@include browsers-sprite(safari);
}
然后，指南针足够聪明地识别背景位置，而无需我们明确指定背景位置。 在常规CSS中，上面的这一行将变成
.browsers-sprite, li {
background: url('/images/browsers-sad8e949931.png') no-repeat;
}
li {
background-position: 0 -512px;
}
指定容器尺寸
我们需要做的最后一件事是指定包含图像的容器的height和width 。 我们通常以传统方式通过手动检查图像的width和height （最有可能通过图像信息或图像属性）来执行此操作。
使用Compass，我们可以利用此功能<map>-sprite-height(image-name)或<map>-sprite-width(image-name)检索图像的宽度和高度。 在此示例中，我们将检索图像的width和height之一@include储值变量，并使用@include指令分配背景图像。
$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 Image Sprite的必不可少的功能。 不过，如果您不熟悉该主题，我们建议您按照之前有关Sass和Compass的系列文章进行。 我们希望您发现这篇文章有用。