Search code examples
ruby-on-railscssspritecompass-sass

Spriting with Compass - Should icons be of the same size?

Should the icons which forms a sprite be of the same size?

I am seeing the 'current-menu' icon on the top left of a div and below, inside the div, the icon which follows it inside the sprite, which is bigger. 

@import "marker/*.png";
@include all-marker-sprites;

li.current {
    @include marker-sprite(current-menu);
    ...

Am I doing it wrong?

Thanks in advance.

Solution

  • Compass combines all of your images vertically no matter what their size into a single image. It should then calculate the height of each image and assign it as the background position offset. If your li has a height of say 20px and the current-menu icon has a height of 16px, you'll see some of the next image in the sprite.

    You can either make all of your icons the same size or use the customization options to set things like spacing, position, and repeating. You can read more about it in the Spriting tutorial.