If you're looking for a solution to spriting issues, I recommend checking out this Github Gist: https://gist.github.com/adamlogic/3577147. It helped me in the past with fixing spriting issues and gaining a better understanding of how spriting works in Compass.

You might find the part where the author mentions creating their own sprite mixin particularly interesting:

"I took this a bit further by defining my own (sprite) mixin."

$spritemap-spacing: 50px
@import "spritemap/*.png"

=background-sprite($name, $repeat: no-repeat, $offset-x: 0, $offset-y: 0)
  background-image: $spritemap-sprites
  background-repeat: $repeat
  +sprite-background-position($spritemap-sprites, $name, $offset-x, $offset-y)

  // if no offsets given, set the dimensions of the element to match the image
  @if $offset-x == 0 and $offset-y == 0
    +sprite-dimensions($spritemap-sprites, $name)

"and how I'm using it"

// simplest case; sets the background image and dimensions of the element
h3
  +background-sprite(ribbonfull)

// custom offset; does not set the dimensions of the element
h2
  +background-sprite(ribbonend, no-repeat, 3px, 22px)

// repeating backgrounds are possible, too
#positions
  +background-sprite(doubleline, repeat-x, 0, 45px)

Here is an example of the author's generated CSS:

h3 {
  background-image: url('/images/spritemap-sb826ca2aba.png');
  background-repeat: no-repeat;
  background-position: 0 -405px;
  height: 29px;
  width: 295px; }

h2 {
  background-image: url('/images/spritemap-sb826ca2aba.png');
  background-repeat: no-repeat;
  background-position: 3px -296px; }

#positions {
  background-image: url('/images/spritemap-sb826ca2aba.png');
  background-repeat: repeat-x;
  background-position: 0 -751px; }

I’ve discovered two clever workarounds for dealing with this issue, although neither is perfect:

1. If you only need the icon in one location, you can save it in your image editor with the necessary padding - this method works well. However, if you need to use it in multiple places, you'll need to create duplicates (which can be inconvenient).
2. Another option is to utilize pseudoelements. Suppose "el" is the element where you want to apply the background and your icons are stored in an "icons" folder:

@import "icons/*.png";

el { 
  position: relative; 
}

el:after { 
  content: ""; 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  @include icons-sprite(some_icon); 
  margin-top: - round(icons-sprite-height(some_icon) / 2); 
  margin-left: - round(icons-sprite-width(some_icon) / 2);    
}

$icons-gap determines the amount of space between each icon on the sprite sheet. To customize the positioning, you should modify the $icons-offset property which controls the background-position.

Let's start with an interesting query...

When using CSS sprites, you can create classes like .image-name. This is precisely how Compass sprites function. Your image gets added to a larger sprite image, organizing all irregular images in a grid layout.

Although utilizing $icons-spacing allows for adding padding to the grid, it might not be straightforward in this scenario. Therefore, we will proceed as follows based on the generated output.

If you desire an appearance similar to the example, centering the element with the Compass-generated class is essential.

Imagine you have an image named adventure.png, generating the following class:

.icons-adventure {
    background-position: 0 -608px;
}

To align this centrally, follow this approach:

<div class="border">
    <i class="icons-adventure"></i>
</div>

For the border class, apply padding. Essentially, wrap .border around .icons-adventure, then assign padding and width accordingly.

.border {padding: 15px; width: 40px;}

In this instance, height specification is unnecessary as it is automatically handled. Stay tuned for a demo that provides a comprehensive demonstration of these concepts.

If you're aware of the dimensions of your icon, consider setting a default height for all icons and then adjusting individual icons by giving them a vertical offset of (default height - icon height)/2 while centering them horizontally:

$sprite-spacing: 50px;
@import "compass/utilities/sprites";
@import "sprite/*.png";
@include all-sprite-sprites;
$sprite: sprite-map("sprite/*.png", $spacing: 50px);

@include sprite-sprite(myicon);
@include sprite-background-position($sprite, myicon, center, 12px);

For those implementing Bootstrap 3, a straightforward and neat solution is available:

SASS File

@import "compass";
$home-spacing : 10px;
$home-sprite-dimensions : true;
@import "web/images/home/*.png";
@include all-home-sprites;

In the HTML/Slim File, simply utilize the center-block class from Twitter Bootstrap 3 for centering images within a div element:

=content_tag('div','',:class=>'home-save_money center-block')

This method ensures that the images are aligned at the center of the div without resorting to custom Mixins or workarounds.

Note: Even if you are not using twitter bootstrap, applying the following CSS rules will achieve the same effect:

display: block;
margin-left: auto;
margin-right: auto;

Hopefully, this tip proves helpful to someone in need,