指南针跨多个样式表的精灵图像 [英] Compass sprite images across multiple style sheets
问题描述
是否有一种方法可以使罗盘从不同样式表中的图像生成子画面表？
Is there a way to get compass to generate a sprite sheet from images across different style sheets?
教程讨论了从文件夹中的一堆图像生成精灵，然后在1个样式表中使用它。但是对我来说，在所有使用精灵表的样式表中必须使用以下内容似乎很不直观：
The tutorial talks about generating sprites from a bunch of images in the folder and then using it in 1 style sheet. But to me, it seems counter intuitive to have to use the following in all my stylesheets that uses the sprite sheet:
@import "icon/*.png";
@include all-icon-sprites;
我希望为每个Sprite工作表设置不同的图像，然后再将其标记为Sprite
I would prefer to have different images set for each sprite sheet, and then some how mark them for sprite generation so that compass can collect them into a sprite and then update the css to reflect that.
推荐答案
指南针每次只能生成一个精灵，因此指南针可以将它们收集到精灵中，然后更新css以反映出来。目录。这样很好，因为浏览器可以将其缓存，从而避免了在多个页面上使用它时都需要获取它的情况。您甚至可以使用Selector Control反复选择使用该精灵，您可以在参考的教程中进行介绍。
Compass only generates one sprite per directory. That's good because it can be cached by browsers eliminating the need to fetch it if you use it on multiple pages. You can use that sprite over and over even selectively using Selector Control which is covered in the tutorial you referenced.
想象一下，在图像文件夹中有四个图标：
Imagine that in your image folder there are four icons:
- images / icon / apple.png
- images / icon / banana.png
- images / icon / basketball.png
- images / icon / football.png
- images/icon/apple.png
- images/icon/banana.png
- images/icon/basketball.png
- images/icon/football.png
在名为 fruits.sass 的样式表中，导入所有图标，并且仅使用 apple 和香蕉图标。
In a stylesheet called fruits.sass, you import all the icons and only use the apple and banana icons.
@import "icon/*.png";
.fruits
.banana
+icon-sprite(banana)
.apple
+icon-sprite(apple)
在名为 sports.sass 的样式表中，导入所有图标和仅使用篮球和足球图标。
In a stylesheet called sports.sass, you import all the icons and only use basketball and football icons.
@import "icon/*.png";
.sports
.football
+icon-sprite(football)
.basketball
+icon-sprite(basketball)
编译时，一个精灵命名为 icon-sjargon1.png 将会在 images 中生成。
When you compile, one sprite named something like icon-sjargon1.png will be generated in images.
- images / icon / apple.png
- images / icon / banana.png
- images / icon / basketball.png
- images / icon / football .png
- images / icon-sjargon1.png
- images/icon/apple.png
- images/icon/banana.png
- images/icon/basketball.png
- images/icon/football.png
- images/icon-sjargon1.png
您生成的 fruits.css 类似于：
.icon-sprite,
.fruits .banana,
.fruits .apple { background: url('/images/icon-sjargon1.png') no-repeat; }
.fruits .banana { background-position: 0 -20px; }
.fruits .apple { background-position: 0 0; }
您生成的 sports.css 看起来例如：
.icon-sprite,
.sports .football,
.sports .basketball { background: url('/images/icon-sjargon1.png') no-repeat; }
.sports .football { background-position: 0 -60px; }
.sports .basketball { background-position: 0 -40px; }
这篇关于指南针跨多个样式表的精灵图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
