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?