Is there a way to get compass to generate a sprite sheet from images across different style sheets?
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;
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.
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:
In a stylesheet called
fruits.sass, you import all the icons and only use theappleandbananaicons.In a stylesheet called
sports.sass, you import all the icons and only usebasketballandfootballicons.When you compile, one sprite named something like
icon-sjargon1.pngwill be generated inimages.Your generated
fruits.csswill look something like:Your generated
sports.csswill look like: