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 script.png icons into one big image. The sum of the three images is 876B, but the sprited image is only 357B—a huge savings! Compass gives the big image a unique identifier, which is why the file name will be something like icon-s2c4d35777d.png.

Once that’s been sorted, you can specify a class (for example .movie_icon) and @include your image file name—in this case, movie. Compass compiles this, and in the CSS it defines a specific place in the image where our movie icon starts.

In the HTML, all you need to do is use the newly defined movie_icon class like you would any other class.

• Import sprites from an icon folder in Compass.

  ​	​@import​ ​"icon/*.png"​;

• Compass combines three images into one.

  This compiles to:

• Specify a class with the necessary icon.

  compass/project/sass/screen.scss
  ​	.movie_icon {
  ​	height: 20px;
  ​	​@include​ icon-sprite(movie); }

  This compiles to:

  ​	.icon-sprite, .movie_icon {
  ​	background: ​url('../../../../images/compass/icon-s2c4d3.png')​
  ​	no-repeat;
  ​	}
  ​
  ​	​/* line 8, ../sass/screen.scss */​
  ​	.movie_icon {
  ​	height: 20px;
  ​	background-position: 0 -22px;
  ​	}

• Use in HTML.

  ​	​<div​ class=​"movie_icon"​​>​
  ​	​</div>​