Search code examples
csssasscss-spritescompass-sass

Centering sprites with SASS/Compass

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

Solution

  • 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.