0

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

4

1 回答 1

6

为什么

简单地说：节省网络请求。在网络上，一个 10kB 的 sprite 请求比十个 1kB 图像的十个请求快得多。

此外，一个压缩的图像精灵将在网络上产生巨大的节省。例如，拍摄 13 张图像，每张大约 4kB。那是 52kB 超过 13 个网络请求。使用精灵，它可以通过 1 个网络请求减少到 1 个 12kB 的图像。巨额储蓄！

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

执行

在图像目录中创建一个名为sprites的文件夹- 将所有图像放在此处。（你可以在sprites文件夹中有多个文件夹。） Moovweb 自动生成 sprite 并在stylesheets/globals目录中创建一个名为. 不要忘记将这个样式表导入到._sprites.scssmain.scss

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

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

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

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

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

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

于 2013-04-01T07:17:09.227 回答