Centering sprites with SASS / Compass

Question

I have a problem with horizontal centering sprites using Compass Sprites.

I have a bunch of sprites of different sizes for the icons, and I want them to focus on the container in which they are located, so for example, this is the left side icon.

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; 

not expected:

 background-position: 50% -223px; 

What is the point of centering it on a sprite if it has such a location, specially declared in this way? Right now, I hardcode it as 50%, and the Y axis sucks, because when I add a new sprite, I have to change them all, which completely defeats the target.

Am I doing this wrong in Compass, CSS, or just not working as intended? The only way to make sure that this is done is to specify the dimensions, and then contain the icon and center it inside. 50% of the left value remains, so you don’t need to do this ... right?

Just a note ... it sucks that Compass also doesn't support JPEG sprites. - About 6 advertising images were displayed on the first page, and it would be nice if they asked where you can simply replace the images in the folder and sort it!

Thanks Dom

Answer 1

Just enveloped your question. I get your thought and have the same problem. I also tried to find a general solution. But that does not seem possible.

For me, the offset position works, but this is not ideal, because 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 overwrites the horizontal value, but retains the vertical value.

As I said, it’s not perfect, but it works if you do not need to configure a huge amount of sleep. You could write a mix. But still ... it would be great if Compass itself provided such an option.

Answer 2

Just to check if I'm right: you created a sprite for all the icons you want to center. Inside the sprite, all the icons are centered, so you can use x: 50% and the corresponding y-value, right?

Since the compass set the background to the wrong position, you could use a different method. At least that's what I did. If you do not need to support IE6 / 7, you can use the compasses built-in data functions: http://compass-style.org/reference/compass/helpers/inline-data/

This way you reduce HTTP requests, which are the main purpose of the sprite, but at the same time you get all the benefits that a normal image can give.

If you create an intelligent mix, it’s very, very convenient. And even smarter than sprites.

Answer 3

I had the same problem. I would like to center the horizontal sprite vertically (e.g. create an icon using: after an inline element). Unfortunately, Compass converted my 50% to 50 pixels, so I created the following 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); } 

Usage example:

 $icons: sprite-map("icons/*.png", $layout: horizontal); a.arrow:after { background: $icons sprite-position-x($icons, arrow-right) 50%; //... } 

Hope I can help.