css - 为什么我应该在我的移动网站上使用 sprite？

Question

为什么我应该在我的移动网站上使用 Sprite 来构建 CSS？在 Tritium 中如何实现它们？

Answer 1

原因

简单地说:节省网络请求。通过网络请求一个 10kB 的 sprite 比请求十个 1kB 的图像要快得多。

此外，一个压缩的图像 Sprite 将通过网络产生巨大的节省。例如，拍摄 13 张图像，每张大约 4kB。这是 13 个网络请求的 52kB。通过 spriting，可以通过 1 个网络请求将其压缩为 1 个 12kB 的图像。巨大的节省!

您不必制作自己的 Sprite - Moovweb 可以自动为您生成它们。

实现

在 images 目录中创建一个名为 sprites 的文件夹 - 将所有图像放在这里。 (您可以在 sprites 文件夹中有多个文件夹。)Moovweb 自动生成 Sprite 并在名为 _sprites.scss 的 stylesheets/globals 目录中创建样式表。 .不要忘记在 main.scss 中导入此样式表.

例如，要用某个站点的所有小猫图片创建一个 sprite，请将所有小猫图像放在 images 文件夹中名为 sprites 的文件夹中。 Moovweb 在 images 文件夹中创建一个更大的 Sprite 图像。它还创建了一个样式表，_sprites.scss ，在 stylesheets/globals 文件夹中。

在样式表中，Moovweb 为每个图像定义了一组类、mixins 和变量。他们的名字格式是sprites-filename .例如，在我们上面的 sprite 文件夹示例中，cat.png Sprite 文件夹内的图标将具有类 .sprites-cat .

您可以通过以下三种方式之一使用图像:

1. 使用 @extend或 @include在样式表中的另一个类/id 下应用图像中的相同样式

2. 使用具有图像类的氚插入一个新元素:insert("div", class:"sprites-filename")

3. 用氚在现有元素上添加一个类:add_class("sprites-filename")