In this tutorial (which is kind of a part 2) you’ll learn how to create a CSS sprite using Sass and Compass! This method of creating and using sprites involves some manual fine tuning inside your Sass/CSS code. For a completely automatically way to generate CSS sprites, view my other article for that solution (which is the part 1 of CSS sprites, in a way).
With this tutorial, we’ll be taking advantage of the Compass CSS helper tool called sprite-map(). For more information – you can read their own documentation on it. This tutorial is aimed at Mac users, but the principles for doing this on Windows is just the same.
For this tutorial, I’ll presume you have Sass and Compass running inside your website development environment. If you don’t, learn how to install Sass and Compass in a previous article here.
Table of contents
- Set up working space
- Sass code for sprite
- Finding the position and dimensions of images within the sprite
Setup working space and images
Let’s first start by setting up our directory and file structure. For this example, I have a directory called sprite-sass-compass (root directory). The directory has just a css and images directory inside for this example. Imagine this is the root directory for your website though. Here’s what it looks like:
Inside my css directory, is the all familiar config.rb, main.css (the actual CSS output file from my Sass), and a Sass directory:
Inside the sass directory is my single Sass file – main.scss. This is where all the code for the Sass and Compass stuff for this tutorial will go:
Before we continue, make sure you have the correct image path stored inside of the config.rb file, as this file path is used when we begin making the sprite. You will see the image directory path matches my directory structure. Here’s the contains of the config.rb file for this example:
Lastly, let’s venture inside the images folder and see what we’ve got there:
As you can see above, we have four images ready for our CSS sprite later on.
Now we have the file structure and configuration in place for this example, we can get on with the main part of this tutorial – automatically generating the CSS sprite and using this in our stylesheets. It’s important to understand the file organisation here, as it plays a part within our Sass code later on. It’s also important as this example may end up slightly ambiguous if this stuff wasn’t made clear from the beginning.
Sass code for Sprites
Before we start editing our Sass file for the automatic CSS sprite generation, let’s ensure that compass is polling for changes inside our directory. I’ll go to my Terminal, cd into my css directory, and type compass watch to begin the automatic compile upon change:
Now we’ve got the watch in place, great! We can start editing our Sass file.
To begin using the sprite utilities Sass with Compass offers, we need to import the sprite helper functions. We use this line of Sass to do just that:
@import "compass/utilities/sprites";
So inside of our Sass file (main.scss), we now have the following contents:
Now we have access to the compass helper functions for automatically making this sprite, we can use the function sprite-map() to build the CSS sprite for us! We will save a reference to our sprite inside a variable called $icons-sprite. Let’s get it done:
$icons-sprite: sprite-map("sprites/*.png");
The above code tells Sass/Compass to find all image files ending in .png, and automatically creates a sprite from these images. It’s important you set up the image path inside of the config.rb file correctly, as made clear at the beginning of this tutorial, otherwise this function wouldn’t be able to locate those images.
Before you save, we need to create a class that will contain our new sprite background image. We will add this class to any HTML element that needs the sprite background. So we’ll go ahead and add this to main.scss:
.icons-sprite-bg {
background-image: $icons-sprite;
}
The above code snippets should result in something that looks like this altogether:
Now save your Sass file and switch over to Terminal and watch the automatic build of your CSS sprite take place:
Awesome!! It just created a sprite from all the images ending in .png from your sprites folder! But you want more proof don’t you?! So here it is:
You might not agree with my file structure or naming convention for this – but I’m just providing you with the concept of how to automatically create CSS sprites in this example. You can customise your file structure once you’re comfortably happy with how all this works.
And to check that our CSS class .icons-sprite-bg has the correct sprite background as the image, let’s open up the compiled main.css file. You should see something like the following:
It has automatically provided our stylesheet with the latest CSS sprite URL to work with.
Now on to even more useful sprite tools…
Find the position and dimensions of an image inside the sprite
It’s all well and good automatically creating a CSS sprite with Compass, but now you need to know the position of the images (which might change), and also the width and height of those images. And this all needs to be dynamic. As adding new images or removing images from the sprite is going to juggle things around. Well that’s no problem for Sass and Compass – so let’s get on with it!
Let’s say that we have a button that needs the lock icon we have above. The HTML will look like this:
<button> <i class="icons-sprite-bg icon-lock"></i> Lock me </button>
We’ve added the sprite background image to the <i>, using our shared CSS class; icons-sprite-bg. We’ve also prepared an additional CSS class on the <i> element, called icon-lock. Knowing this, let’s go back into our main.scss file and add some changes.
We are going to make the <i> element the correct dimensions for our lock.png icon, and also have the correct background position for the lock icon image from the sprite itself. We’ll make use of the Sass functions image-width() and image-height(), and with help from Compass, we’ll also use sprite-position(). Let’s get it done:
.icon-lock {
display: inline-block;
background-position: sprite-position($icons-sprite, lock);
width: image-width("sprites/lock.png");
height: image-height("sprites/lock.png");
}
There’s a few things going on here. We set the display to inline-block, in order to set a width and height. We then pass two arguments to sprite-position(); the first argument is the variable name of the sprite map (that’s $icons-sprite in our case), that we declared at the beginning – this tells the script which sprite to use for the position values. The second argument is the file name of the image you wish to locate (without the extension – .png), which is lock in our case.
We then use the image-width() and image-height() functions to get the corresponding values for each dimension. These functions start the path at the image directory (which you assigned in your config.rb file), and then you pass in the remaining path and file name to the image.
So Sass main.scss should now look like this:
And if you save the above Sass, and go check out your main.css file once it’s compiled the changes, it should now give you the correct values for that particular image. Something like this:
And there it is! You can repeat this technique for all four icons within your CSS sprite. So altogether it will look like this:
/* Utilities */
@import "compass/utilities/sprites";
/* Sprite maps */
$icons-sprite: sprite-map("sprites/*.png");
.icons-sprite-bg {
background-image: $icons-sprite;
}
i {
display: inline-block;
}
.icon-lock {
background-position: sprite-position($icons-sprite, lock);
width: image-width("sprites/lock.png");
height: image-height("sprites/lock.png");
}
.icon-camera {
background-position: sprite-position($icons-sprite, camera);
width: image-width("sprites/camera.png");
height: image-height("sprites/camera.png");
}
.icon-cross {
background-position: sprite-position($icons-sprite, cross);
width: image-width("sprites/cross.png");
height: image-height("sprites/cross.png");
}
.icon-message {
background-position: sprite-position($icons-sprite, message);
width: image-width("sprites/message.png");
height: image-height("sprites/message.png");
}
Which will result in something like the following inside of main.css:
And that’s how you can create a CSS sprite using Compass and Sass together! You can do a lot of very helpful and useful things using this advanced sprite generation method.
If you want a more automatic way to build CSS sprites, without having to declare the background position and image dimensions yourself, you can check out my other article on how to automatically generate CSS sprites with Compass and Sass.
