I'm trying to use compass to import and include a sprite and a bunch of partials in one SCSS file and have the included partials get access to the sprite's generated variables/mixins/etc. It's a bit similar to this question: Compass sprite images across multiple stylesheets, but still different enough that I thought I'd ask a new question.
Here's an example of what I'm trying to do.
$icon-sprite-dimensions: true;
@import "icon/*.png";
@include all-icon-sprites;
// Include partials
@import "pirate-icons";
@import "ninja-icons";
@import "cowboy-icons";
I would like to be able to use the variables and mixins generated from @import "icon/*.png" and @include all-icon-sprites in the included partials. I don't really want to have to do @import "icon/*.png", etc. in each one of the partials if I don't have to because it will generate duplicate entries in each partial. There are ways to get around this by not using @include all-icon-sprites and instead using things like @include icon-sprite(spurs). This isn't ideally what I want to do, but it works. The other thing I don't like is that when you @import the sprite into multiple files, you get something like:
create images/icon-s00df19a6f5.png
unchanged images/icon-s00df19a6f5.png
unchanged images/icon-s00df19a6f5.png
unchanged images/icon-s00df19a6f5.png
create stylesheets/all-icons.css
Is there a way for something like this to work in Compass or do I have to @import "icon/*.png" in each one of the partials and then use @include all-icon-sprites or multiple of these @include icon-sprite(holster)?
I feel a little silly, but it turns out that this already works perfectly.
You only run into problems when you're including regular sass files and not partials (pirate-icons.scss = regular, _pirate-icons.scss = partial). The reason it doesn't work when those files are not partials is that compass compiles those separately, outside the scope of the file they're being included in, which can result in inconsistencies and errors because those stylesheets no longer know about the sprite variables and mixins when you're trying to use them.
For example, when doing
$icon-sprite-dimensions: true;
@import "icon/*.png";
@include all-icon-sprites;
// Include partials
@import "pirate-icons";
@import "ninja-icons";
@import "cowboy-icons";
If cowboy-icons was cowboy-icons.scss, it would compile once in the scope of the all-icons.scss file and once outside of that file's scope. When compiling outside that scope, any attempts to use one of the mixins like @include icon-sprite(spurs) would cause an error because it doesn't know what that means anymore.
tl;dr
just make sure that pirate-icons is _pirate-icons.scss and not pirate-icons.scss and it should have the desired effect.