O'Reilly logo

Pragmatic Guide to Sass by Michael Lintorn Catlin, Hampton Catlin

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

34Spriting

Spriting is a process by which many small icons or pictures are turned into one larger one for use in a website. The one larger file is not the direct sum of its parts—its file size is a lot smaller than the separate images combined. This is of supreme importance in the age of the mobile web, where every KB counts.

Creating a sprite image file for incorporation into your site is incredibly simple with Compass. We used to have to stitch together all the images using Photoshop and then define each image by its location in pixels. Compass does this all automatically for us.

We have to make sure all our images are in one folder—for example, icons. Then we @import the icons from the folder.

Compass makes the link.png, movie.png, and

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required