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将合并这些图像并生成新的图像文件,如下所示。
![图像精灵](https://i-blog.csdnimg.cn/blog_migrate/bfca11ccb8dfd03272c901397f145764.png)
布局方向
此外,我们还可以设置精灵方向。 如您在上面的屏幕快照中所见,默认情况下图像是垂直排列的。 如果垂直方向不适合这种情况,我们可以使用以下变量$<map>-layout: horizontal;
将它们水平或对角$<map>-layout: horizontal;
或$<map>-layout: horizontal;
将<map>
替换为保存图像的文件夹名称。
$browsers-layout:horizontal;
@import "browsers/*.png";
![水平图像精灵](https://i-blog.csdnimg.cn/blog_migrate/a91bf6ca9e6bf150e74ace40846d904c.png)
$browsers-layout:vertical;
@import "browsers/*.png";
![图像精灵对角线](https://i-blog.csdnimg.cn/blog_migrate/132c977d1e46aace8bdf77e4008d8d7e.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的系列文章。 我们希望您发现这篇文章有用。