Yeoman + Compass Sprites
generator-webapp has support for compass out of the box. However, in order to use one of my favorite features of it — sprites and the
image_url helper — you have to make some adjustments to the
Let's assume you use a SASS stylesheet like this one:
@import "design/*.png" .icon +design-sprite('icon') display: block width: design-sprite-width('icon') height: design-sprite-height('icon') #logo background: transparent image_url('logo.png') no-repeat width: 64px height: 64px
This assumes that you have an
icon.png file in your
app/images/design/ folder and a
app/images/. In the default configuration, compass will generate incorrect paths to the file.
To fix that, you have to make some adjustments to the
Now you're done and should be able to use sprites both in server and production mode.
usemin has troubles detecting images referenced by the
image_url helper and replacing
them with the revved version, because compass appends a timestamp on them. You can either
disable the cache buster
feature of compass, or disable the
rev task to work around this.
Good tip on usemin and