Question

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?

Was it helpful?

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?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top