Using the same Compass sprite in different stylesheets

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.