HTML and CSS Reference
the associated CSS file using images within these files positioned and corrected as
a background image.
There are some things to note when using this tool, as explained in the following
• Make sure the folder only contains the images you want to add to a sprite
• The resulting CSS file is generated within the folder used to create the
• The generated sprite is opened in Adobe Photoshop and you are required
to crop it before you save it out as an image at the location of your choice
CSS sprites with Compass
Compass—the framework on top of Sass—can stitch your images together at com-
pile time and have the images referenced in your Sass file, turned into a sprite in the
resulting CSS file.
All you need to do is to make sure you set up a folder within your images folder, such
that you have the right names for each of the images, as described in the following
list (taken from Compass documentation):
The name my-icons can be any name you prefer. Then in the Sass file, use the
Use the same name you used instead of my-icons in the previous step. Presto!
You are done! Compass generates a CSS file that has the following code: