Centering sprites with SASS/Compass - css

Question

I'm having an issue with horizontally centering sprites using Compass Sprites.
I have a bunch of sprites that are of different sizes for icons and I want them to be centered on the container they're in so they're a left hand side icon for instance.
If I do this:
$sprite-position: 50%;
#import "sprite/*.png";
then the images are centered on the generated sprite.png but the CSS is actually something like:
background-position: -9px -223px;
rather than the expected:
background-position: 50% -223px;
What's the point of centering it on the sprite if its going to have the location specifically declared like that? Right now I'm hardcoding it as 50% and the Y-axis which sucks because when I add a new sprite then I have to change them all which completely defeats the purpose.
Am I doing this wrong in Compass, CSS or does it just not work as its supposed to?
The only way I can see this being done is by having it specify the dimensions then contain the icon and center it within there. The 50% left value is there though so you don't need to do this... right?
Just a note... it sucks that Compass doesn't support JPEG sprites as well -.- Got about 6 promotion images on the front page and it would be nice to have them sprited up where you can just replace the images in the folder and its sorted!
Thanks, Dom

Answer 1

Just stubmled upon your question. I get your point and had the same problem. I also tried to find a general solution. But it doesn't seem to be possible atm.
For me the position offset option works, but it's not perfect cause you have to apply it to each sprite:
#import "socialmedia/*.png";
a.twitter {
#include socialmedia-sprite("twitter");
#include socialmedia-sprite-position("twitter", 50%);
}
a.facebook {
#include socialmedia-sprite("facebook");
#include socialmedia-sprite-position("facebook", 50%);
}
This is overwriting the horizontal value but keeps the vertical value.
As I said, not perfect but works if you don't need to adjust a huge amount of spites. You could write a mixin though. But still... would be great if Compass itself would provide such an option.

Answer 2

Just to check if I'm getting you right: You created a sprite for all the icons you want to center. Within the sprite all icons are centered, so you can use x:50% and the according y-value, right?
Since compass set's the wrong background-position you could use other method. At least, thats what I did. If you don't need to support IE6/7 you could use compasses inline-data-feature: http://compass-style.org/reference/compass/helpers/inline-data/
This way you reduce the HTTP-Requests which is the main purpose of a sprite but at the same time you get all the benefits a normal image would give you.
If you build a smart mixin this is very, very handy. And even smarter than sprites.

Answer 3

I had the same issue. I wanted to center a horizontal sprite vertically (e.g. creating icon using :after on an inline element).
Unfortunately Compass converted my 50% to 50px so I created these functions:
#function _sprite-position-nth($map, $sprite, $n) {
$positions: sprite-position($map, $sprite);
#return nth($positions, $n);
}
#function sprite-position-x($map, $sprite) {
#return _sprite-position-nth($map, $sprite, 1);
}
#function sprite-position-y($map, $sprite) {
#return _sprite-position-nth($map, $sprite, 2);
}
Example usage:
$icons: sprite-map("icons/*.png", $layout: horizontal);
a.arrow:after {
background: $icons sprite-position-x($icons, arrow-right) 50%;
//...
}
I hope I could help.