Sass and Compass for Designers

Compass image sprites

While we can set the background images for elements with the help of Compass image helpers for individual images, it's often considered a better practice to use an image sprite. I'm sure you'll have used this technique before. A single image (referred to as an 'image sprite') is created that includes all the other images. This single image is then shifted around by the CSS background-position property to show different images on different elements. The technique has an additional benefit of using images for hover states. As the single image is already loaded, there's no delay when an item is hovered over (the delay is usually caused by the separate hover image being requested, fetched, and parsed).

It's a great technique but ...