Quick guide to auto generate image sprite using Compass

One of the nice thing about Compass is its smart way to auto generate sprite image. Lets take a quick look on using Compass to generate our project's sprite image need.

We will use this file structure to our project:

Where:
assets/images = source image files of Compass generated sprite image
assets/js = source javascript files goes here
assets/sass = SASS files stored here
img = Compass generated sprite image will be saved here
js = minified version of source javascript

Now, lets have the following codes in our "config.rb" file:

  
http_path = "/"
css_dir = "css"
sass_dir = "assets/sass"
images_dir = "assets/images"
javascripts_dir = "js"
generated_images_dir = "img"
http_images_path = http_path + "/" + generated_images_dir
http_generated_images_path = http_images_path
  

It is important to respecify the value of "http_generated_images_path" to:

  
http_path + "/" + generated_images_dir
  

... although the Compass document says that value is the default. If not done, Compass will generate CSS with the background image url set to wrong path.

Create new folder inside "assets/images" and labeled it as "icons":

This "icons" folder will contain the background images that Compass will look as source for generating a sprite image. Lets put background image files in this "icons" folder:

Next, create "style.scss" inside "assets/sass" folder and populate it with this codes:

  
@import "compass/utilities/sprites";
$icons-layout: vertical;
$icons-spacing: 20px;
$icons-sprite-dimensions: true;
@import "icons/*.png";
@include all-icons-sprites;
  

To find out more about the Compass sprite options, please check http://compass-style.org/help/tutorials/spriting. Note: as of this writing the smart layout does not support sprite spacing.

Compile your SASS and Compass should generate a sprite image file inside "img" folder something like this:

... and a regular CSS "style.css" inside "css" folder should also be generated populated with codes something like this:

  
.icons-sprite, .icons-check, .icons-grid, .icons-like, .icons-marker, .icons-next, .icons-prev {
  background-image: url('/icons-s0e3d8eaec3.png');
  background-repeat: no-repeat;
}
.icons-check {
  background-position: 0 0;
  height: 18px;
  width: 22px;
}
.icons-grid {
  background-position: 0 -38px;
  height: 16px;
  width: 16px;
}
.icons-like {
  background-position: 0 -74px;
  height: 14px;
  width: 15px;
}
.icons-marker {
  background-position: 0 -108px;
  height: 19px;
  width: 13px;
}
.icons-next {
  background-position: 0 -147px;
  height: 18px;
  width: 18px;
}
.icons-prev {
  background-position: 0 -185px;
  height: 18px;
  width: 18px;
}
  

Now, we can use the generated CSS class in our application like:

  
a.button-next i {
  @include icons-sprite(next);
  overflow: hidden;
}
a.button-prev i {
  @include icons-sprite(prev);
  overflow: hidden;
}