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.
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.
Then in CSS, they would set the height, width, and background image properties for the button, changing the background position for each state.