SASS/SCSS and Compass Part 4 Spriting

Mira Javora
Page content

Statistically Awesome Style Sheets with Compass can help you easily generate sprites. Not only that, it will re-generate the images, re-calculate the position and update the CSS every time you update the source images. This post explains the basics and aims to address the most common scenarios when creating sprites.

What Are Sprites

Sprites exist to reduce the number of requests to the server by combining multiple images in one. This can make a significant performance and usability improvement to your site. Using CSS you can show/hide areas of the large sprite image.

How does it work

To create a sprite with SASS, simply place all your images that should be part of the sprite in a folder in your images folder. Compass will generate a sprite file and will place it on the same level as the folder. IE if the folder was called /content/images/icons/, it will generate /content/images/icons-{hash}.png file.

You need to have compass watch command running and your images folder can be defined in compass.rb file. If you’re not sure how to get these up and running, check out my introduction to SASS post.

Simple Rollover Image Button

One of the most common sprites – rollover image. First, place the two image states to the folder called submit (normal.png, hover.png). IE /Content/images/submit/normal.png and /Content/images/submit/hover.png

First declare the mixin and import compass lib for spriting

 1@import "compass/utilities/sprites/base";
 2@mixin spriteHoverButton($selector, $spriteMap) {
 3    #{$selector} {
 4    float: left;
 5    overflow: hidden;
 6    padding: 0;
 7    text-indent: -1000px;
 8    background: sprite($spriteMap, normal) no-repeat;
 9    @include sprite-dimensions($spriteMap, normal);
10    }
11 
12    #{$selector}:hover {
13        background-position: sprite-position($spriteMap, hover);
14    }
15}

Then define the sprite map from the images (this will create the sprite)

1$continue: sprite-map("submit/*.png");

You will notice that submit-{hash}.png was created. Finally, use the mixin to create the CSS button with specified selector

1@include spriteHoverButton('a.continue', $continue);

Remember, every time you update the images in the submit folder, compass will automatically re-generate the sprite and update the dimensions.

Generated CSS

 1/** Submit Sprite **/
 2a.continue {
 3  float: left;
 4  overflow: hidden;
 5  padding: 0;
 6  text-indent: -1000px;
 7  background: url('/images/submit-sb839570bbd.png') 0 -37px no-repeat;
 8  height: 37px;
 9  width: 137px;
10}
11 
12a.continue:hover {
13  background-position: 0 0;
14}

Creating Icons Sprite

Alternatively, instead of defining the sprite map and getting properties using the file names ie sprite-position($spriteMap, hover), you can let compass and SASS handle everything for you. This is particularly handy when creating large icon sprites where you worry less about additional CSS syntax.

Simply place all the images in the single directory. EG /images/icons/one.png /images/icons/two.png ….. Then, import the compass spriting base and the icons folder

1@import "compass/utilities/sprites/base";
2@import "icons/*.png";

And finally call all-{foldername}-sprites mixin. Make sure you use the correct foldername, IE if folder name was icons, then the call would be all-icons-sprites.

1@include all-icons-sprites;

This will go through every single png file in the folder and create sprite markup using the image name. Resulting in following CSS

 1.icons-sprite, .icons-four, .icons-one, .icons-three, .icons-two {
 2  background: url('/images/icons-s337020fd3d.png') no-repeat;
 3}
 4 
 5.icons-four {
 6  background-position: 0 0;
 7}
 8 
 9.icons-one {
10  background-position: 0 -37px;
11}
12 
13.icons-three {
14  background-position: 0 -74px;
15}
16 
17.icons-two {
18  background-position: 0 -111px;
19}

Have fun! If you like to know more or are just bored, follow me on @mirajavora :-)

SASS with Visual Studio Part 1 Introduction SASS with Visual Studio Part 2 Features and Syntax SASS with Visual Studio Part 3 Real World SASS/SCSS and Compass Part 4 Spriting