Cannot get Compass to generate icon sprites
-
09-10-2019 - |
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?
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?