Using the same Compass sprite in different stylesheets - sprite

Question

I'm using Compass to generate CSS sprites.
I found a way to define a sprite once and use it across different .scss files, but I'm not sure this is the right solution.
The best way I could find until now is:
create a _variables.scss partial file
define the sprite inside the _variables.scss partial file
import the _variables.scss partial in every .scss file
Example
_variables.scss file:
$siteSprite-spacing: 20px;
#import "siteSprite/*.png";
firstPage.scss file:
#import "../variables.scss";
.close {
#include siteSprite-sprite(close, true);
}
secondPage.scss file:
#import "../variables.scss";
.viewMore {
#include siteSprite-sprite(arrow, true);
}
And this works, but...
The problem is that every time that Compass compiles the scss files (firstPage.scss, secondPage.scss) it reads the _variables.scss partial and then reads all the images, trying to generate the sprite each time.
The result is that the compile process ends up in this:
create generated_images/siteSprite-s526a535d08.png
unchanged generated_images/siteSprite-s526a535d08.png
create css/firstPage.css
unchanged generated_images/siteSprite-s526a535d08.png
create css/secondPage.css
unchanged generated_images/siteSprite-s526a535d08.png
create css/thirdPage.css
unchanged generated_images/siteSprite-s526a535d08.png
And this is extremely slow, because I have many pages and many files inside the siteSprite image folder.
How can I avoid this problem?

Answer 1

I will explain how I use compass sprites and hopefully this will be helpful to you too.
I usually create a _base.scss partial file, in which I put all the generic #import's and #include's plus any generic css code for my project. In the _base.scss I also add the following sprites-specific code (assuming that the folder, where I keep my icons, is called "icon" and that my icons have a .png extension):
#import "compass/utilities/sprites";
#import "icon/*.png";
#include all-icon-sprites;
This _base.scss is the first file that I import in any *.css.scss file (the equivalent of your "firstPage.scss" and "firstPage.scss") of my project.
Now, to use any of these sprites inside a div, I just do this:
#my_id (or .my_class) {
#extend .icon-myicon;
}
where "myicon" is the name of one .png file inside the "icon" folder.
This compass tutorial is actually very helpful, so you may want to have a look.
If you are worried that some files may end up being imported more than once, you can try using the plugin compass-import-once.