Spriting is a popular way to reduce the requests necessary for loading your website, combining images into one file.
Now, yes, you can make a sprite by hand, combining your images together, noting their background-positions in the image using something like Sprite Cow.
That is, until you start using generated sprites with Compass.
The Basics
Compass allows you to place your individual images into a folder and (assuming you have Compass installed), you can add the sprite to your Sass with a simple command:
@import "my-icons/*.png";
With “my-icons” being your folder name. You can use some magic to include all of the images in your CSS, and then all you have to do is use those names. Do this by using:
@include all-my-icons-sprites;
When you import the folder, Compass creates some mixins to manipulate data it knows about that sprite sheet.
There’s More
The kicker? That’s not the only mixin. There are a few more that are a bit hidden in the documentation (I have an updated version of the gist that shows links to helpers when available). If you have obsessive control of your sprites, you might be using (as shown in the tutorial):
@include my-icons-sprite(image-name);
Which will compile to add that selector to the sprite’s background definition and assign that selector with the proper background-position. Which is great, except when you’ve accidentally added both .icon and .icon:hover to the background declaration (unecessary).
Some of the other great mixins you get with @import "files/*.png"; include:
my-icons-sprite-dimensions(image-name)
my-icons-sprite-position(image-name)
Furthermore, if you want to get funky, you can interact with Compass’ spriting helper methods directly. Reading the gist, you can see how Compass wraps these helper functions with mixins — and nothing’s stoppng you from doing the same if you want to.
Do you sprite with Compass? Another framework?