用指南针创建CSS图像精灵
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的系列文章进行。 我们希望您发现这篇文章有用。