Creating sprites using Compass and SASS (Become an expert)

One of the best ways to reduce server requests, and consequently response times for a site is to create sprites from your images. You could easily use a website to do this, or you can use the power of Compass to do this for you. We're going to look at how to do this using some credit card images, which could easily appear on an e-commerce site.

Getting ready

For this recipe, you will need some suitable images that are a maximum of 32 px square. I have used a selection of 12 credit card images which are available at http://www.smashingmagazine.com/2010/10/21/free-png-credit-card-debit-card-and-payment-icons-set-18-icons/. You will of course also need your text editor and Scout up and running.

How to do it...

1. Let's make a start by creating a folder called c:\compass, then open up a command prompt, and add the following command. We will use the default folders for the purpose of this recipe:

   $ compass create compass --sass-dir "sass" --css-dir "css" --javascripts-dir "javascripts" --images-dir "images"
   

2. In the compass folder we've just created, you will find a folder called sass. Go ahead and create a new subfolder in there called cards and drop in our 12 images.

3. We need to next fire up Scout, as it will be easier to compile the code this way. When open, click on + at the bottom-left corner of the Scout window, and add the following settings, as seen in the following screenshot, and leave all others as default. When complete, click on the Stop button to start scanning that folder for changes:

   

4. Switch to Sublime Text 2, then create a new document and add the following code, saving it as imagesprites.scss:

   @import "compass";
   
   $cards-layout: horizontal;
   $cards-spacing: 5px;
   $cards-sprite-base-class: ".cards-icons";
   @import "cards/*.png";
   @include all-cards-sprites;

5. The code should look like the following screenshot within Sublime Text 2:

   

6. At the time of saving Scout should kick in, and create the sprite for you. If all is well, you will see an auto-generated PNG file appear in the sass folder, similar to cards-sad556f86f6.png. Opening it up will reveal something similar to the following screenshot:

   

How it works...

Although this might be a little tricky at first to get to grips with, it is worth persevering – the three lines of code required to implement this functionality belies the power of creating sprites using Compass. In this example, we've collected together a number of images of the same size, and used Compass to generate a single image and the appropriate CSS to allow us to reference each image.

The resulting CSS will include a base style that references the newly created image, followed by individual styles that tell the browser which part of that image to use, as shown in the following extract from the imagesprites.css file:

/* line 130, cards/*.png */
.cards-icons, .cards-cirrus-curved-32px, .cards-delta-curved-32px, .cards-direct-debit-curved-32px, .cards-discover-curved-32px, .cards-maestro-curved-32px, .cards-mastercard-curved-32px, .cards-paypal-curved-32px, .cards-solo-curved-32px, .cards-switch-curved-32px, .cards-visa-curved-32px, .cards-visa-electron-curved-32px, .cards-western-union-curved-32px {
  background: url('/cards-sad556f86f6.png') no-repeat;
}

/* line 60, ../../Program Files/Scout/vendor/gems/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.cards-cirrus-curved-32px {
  background-position: 0 0;
}

Using sprites in your web pages reduces the number of server requests and decreases response times – each subsequent reference to the image calls it from the server cache. You could even get fancy and store it in the local storage area of a compatible browser. This will eliminate any server requests, if done with care! There is a small proviso though with using Compass to create sprites – size and number play an important part in image selection. If Compass deems you've used too many, then it will automatically switch from the default 8-bit format to a higher format, with the associated increase in size and load times. At this stage, it may be preferable to use an external service instead, such as SpritePad (http://www.wearekiss.com/spritepad).

Let's move on, and take another look at this veritable swiss-army knife of a library –vendor prefix support. Compass is often recommended as a good place to start when learning SASS. We're going to look at vendor prefix support, as part of building a simple form in the next recipe.