用指南针创建CSS Image Sprite

CSS Image Sprite是一种将多个图像组合到一个图像文件中的方法，以减少HTTP请求并优化Web负载性能 。 有很多方法和方便的工具可以执行此操作，否则您也可以使用Photoshop传统上执行此操作。

但是，根据我处理CSS Image Sprite的全部经验，没有比使用Sprite Function for Compass容易得多的方法。 因此，让我们看一下它是如何工作的。

启动指南针

在使用Compass代码之前，我们需要创建Compass项目监视它。 因此，每次项目中包括图像和.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的系列文章。 我们希望您发现这篇文章有用。

翻译自: https://www.hongkiat.com/blog/compass-image-sprite/