Search code examples
sasscompass-sass

Cannot get Compass to generate icon sprites

I'm fairly new to Compass, but I have been trying to use Compass in a project to generate my icon sprites. See this tutorial:

IMO, the tutorial isn't exactly clear. To start, the tutorial never tells you to create the "_icons.scss" file that contains the "all-icon-sprites" mixin.

@import "icon/*.png";
@include all-icon-sprites;

The result of this is an error:

  • "Syntax error: Undefined mixin 'all-icon-sprites'."

So I added the "_icons.scss" file to my project, and changed the code to:

@import "icon/*.png";
@import "_icons";
@include all-icon-sprites;

Now, I get this error:

  • Syntax error: Invalid CSS after " $delete-position": expected ")", was ": $icon-delete-..."
    • on line 28 of /path/to/_icons.scss

Can anyone explain to me what I'm doing wrong? Or is the problem actually with the "_icons.scss" file?

Solution

  • The tutorial doesn't tell you to import the _icons.scss, because it is not required. You either import the png files or the generated file -- not both. They are the same, except if you import the png files, you end up importing a generated stylesheet that is kept up to date automatically as the png files change (renames, added, removed, etc).

    do you have any png files in the <images>/icon directory?

    To be honest, this error is one I would expect to see if the compass version that is processing the stylesheet isn't the one you're using on the command line. Are you compiling with rails or the CLI?