I ran into a uncomfortable situation when dealing with Compass generated CSS sprite maps. The Problem was: compass didn't set the height and width for each of the logos which resolved in overlapping. I found an unbelievable easy solution and I think it's worth sharing because it took me quite some time. Kudos to this guy: http://stackoverflow.co…

_sprites.scss

/* importing the compass sprite mixins */
@import "compass/utilities/sprites/base";

/* HERE's the magic: Setting a variable BEFORE loading the sprites */
$brands-sprite-dimension:true;
/* loading all the images from the brands directory */
@import "brands/*.png";
/* and finally, telling compass to include ALL THE SPRITES \o/ */
@include all-breands-sprites;

/*

    As you can see on output_with_dimensions.css the logos have different heights and width and and because the sprite function a vertical
    sprite map (e.g. putting all logos underneath each other ) they were overlapping in the CSS created without $brands-sprite-dimension:true;
    
    In output_without_dimension.css you can see that no height or width is given. 


    In the above case "brands" is the sprite "prefix" because the folder is also called "brands". Another example can be found below, just to make
    the naming clear. (I found a few people around the internet that have been confused by this).

*/

$foldername-sprite-dimension:true;
@import "foldername/*.png";
@include all-foldername-sprites;

output_with_dimensions.css

.brands-sprite, .brands-nike, .brands-puma {
  background: url('path/to/sprite/brands-s78cd51b6d2.png') no-repeat;
}

.brands-nike {
  background-position: 0 -944px;
  height: 12px;
  width: 71px;
}

.brands-puma {
  background-position: 0 -322px;
  height: 9px;
  width: 50px;
}

output_without_dimensions.css

.brands-sprite, .brands-nike, .brands-puma {
  background: url('path/to/sprite/brands-s78cd51b6d2.png') no-repeat;
}

.brands-nike {
  background-position: 0 -944px;
}

.brands-puma {
  background-position: 0 -322px;
}