Compass sprite generation makes working with CSS sprites easy and, dare I say, fun but getting a sprite to repeat horizontally in the background can be an issue for newbies. This tutorial is for those just getting into spriting with SASS and Compass.

For this project, I have set up a compass project right inside my site theme directory:

• My Theme Folder
• config.rb
• Sass Folder
• Stylesheets Folder
• Images Folder

Inside my Images folder, there is another folder that has all my icons and background images for my theme. I've named this folder “icon”.

I want compass to make this folder of images into a sprite. Some of these images will be used for static images, some will be icon rollovers, and one of them will be my repeating background image which I have named “gradient_btn.png”.

There are some GUI interfaces for working with SASS and Compass, but I like to use the command line. To generate the sprite, I navigate to my project folder and input:

compass sprite "icon/*.png"

Compass creates a directory in the sass folder called “sprites”, inside of which is a file “_icon.scss”:

directory sass/sprites/

create sass/sprites/_icon.scss

_icon.scss contains all the settings for the usage of sprites in your theme. Just to see what it does out of the box, I can import it into my main sass file, screen.scss:

@import "sprites/icon.scss";

Thus generating my new sprite image:

create project-name/images/icon-s74d04d4329.png

All my icons are lined up vertically. I've pointed out my gradient. It's very skinny, so I'd like it to repeat in the background of all my site buttons.

Back in screen.scss, I add in the styles for my buttons:

.button {
@include icon-sprite(gradient_btn);
@include button-style; // this is just a mixin with the font and padding and such
}

Here are the results:

The problem is obvious; our background sprite is set at no-repeat by default. We need to override this in our sass file:

.button {
@include icon-sprite(gradient_btn);
@include button-style; // this is just a mixin with the font and padding and such
background-repeat: repeat-x;
}

Resulting in:

Our image is repeating all right, but rather than appearing as a seamless gradient as we'd expect, it appears to have a gap in between each gradient image. This was confusing to me until I realized that this is not a gap. If we look at the original sprite image again, and compare the “gap” to the amount of white-space to the right of our gradient image, we'll see that it is the same amount of space. Our background-repeat is simply repeating against the full width of the sprite image, not the original width of gradient_btn.png.

To fix this, we have the option of separating out the repeating background images and creating a sprite just for them, but in this case we only have one repeater and we'd like to keep all of our icons in one sprite. To fix the width issue, we need to regenerate our sprite with some setting adjustments.

Going into _icon.scss which compass generated for us, we'll now look at the defaults set and see what to change. The first thing we see is this:

// General Sprite Defaults

$icon-sprite-base-class : ".icon-sprite" !default;
$icon-sprite-dimensions : false !default;
$icon-position : 0% !default;
$icon-spacing : 0 !default;
$icon-repeat : no-repeat !default;
$icon-prefix : '' !default;
$icon-clean-up : true !default;
$icon-layout : vertical !default;
$icon-inline : false !default;

We could change the $icon-repeat variable to “repeat-x” by default here, but we only have one sprite that requires this setting. Just under this are the settings for each of the icon images in our sprite.

// These variables control the generated sprite output

$icon-gradient_btn-position: $icon-position !default;
$icon-gradient_btn-spacing: $icon-spacing !default;
$icon-gradient_btn-repeat: $icon-repeat !default;

We'll adjust the setting for $icon-repeat:

$icon-gradient_btn-position: $icon-position !default;
$icon-gradient_btn-spacing: $icon-spacing !default;
$icon-gradient_btn-repeat: repeat-x;

Compass compiles our new sprite:

remove project-name/images/icon-s74d04d4329.png
create project-name/images/icon-sc65b31fa7f.png

The gradient now repeats across the width of the sprite.

When we check our site buttons:

Hey wow! That's a fine looking button.

Now that we see how this works we can experiment with the other defaults for all our sprites to further customize their display. Yeah!