为什么我要在我的移动网站上使用精灵来构建CSS？如何在Tritium中实现它们？
答案 0 :(得分：6)
简单地说：保存网络请求。一个10kB精灵的请求在网络上要比10个1kB图像的10个请求快得多。
此外，一个压缩图像精灵将通过网络节省大量成本。例如，拍摄13张图像，每张图像大约4kB。这是13个网络请求的52kB。通过spriting，可以通过1个网络请求将其降至12kB的1个图像。巨额储蓄！
您不必自己制作精灵 - Moovweb可以自动为您生成精灵。
在 images 目录中创建名称为精灵的文件夹 - 将所有图片放在此处。 （您可以在 sprites 文件夹中包含多个文件夹。）Moovweb会自动生成精灵并在名为_sprites.scss的 stylesheets / globals 目录中创建样式表。不要忘记在main.scss中导入此样式表。
例如，要创建包含来自网站的所有小猫图片的精灵，请将所有小猫图像放在图像文件夹中名为精灵的文件夹中。 Moovweb在 images 文件夹中创建了一个更大的精灵图像。它还会在 stylesheets / globals 文件夹中创建样式表_sprites.scss。
在样式表中，Moovweb为每个图像定义了一组类，混合和变量。他们的名称格式为sprites-filename。例如，在上面的sprite文件夹示例中，sprites文件夹中的cat.png图标将具有类.sprites-cat。
您可以通过以下三种方式之一使用图像：
使用样式表中其他类/ ID下的@extend或@include来应用图片中的相同样式
使用Tritium插入一个包含图像类的新元素：insert("div", class:"sprites-filename")
使用Tritium在现有元素上添加一个类：add_class("sprites-filename")