Chapter 6. Spriting

 

This chapter covers

  • The history of and basic principles behind CSS spriting
  • Automatic spriting with Compass mixins
  • Advanced techniques for customizing sprite images and CSS output

In this chapter, we’ll look at the purpose of CSS spriting, the challenges involved, and how Compass saves you from one of the most tedious jobs in web design.

If you’ve ever manually created your own sprites before, you’re in for a treat! Spriting with Compass is remarkably easy. Compass creates the sprite maps, writes the CSS you don’t want to write, and integrates smoothly into your stylesheet workflow. But this is just the beginning. Even when you need more control over how Compass creates sprite maps and generates CSS, the process is still incredibly simple.

In this chapter, we’ll do an in-depth walk-through of a new Compass project, so if you haven’t installed Compass on your computer yet, see appendix B for help.

6.1. How do CSS sprites work?

In the early days, CSS sprites were very simple. Designers would create images for the different states of a button and put them together as a single image, as shown in figure 6.1.

Figure 6.1. Example of a simple sprite map

Then in CSS, they would set the height, width, and background image properties for the button, changing the background position for each state.

6.2. Why is spriting necessary?

6.3. Spriting with Compass

6.4. Configuring Compass sprites

6.5. Mastering the magic with sprite helpers

6.6. Summary