3

I'm in the midst of creating a SASS mixin that will let me take a spritesheet of social media icons and display them, but I'm having an issue with the background-position when it's hovered over, here's the SASS code:

@mixin social-button($imgurl,$xpos,$ypos,$height,$width) {
  background-image: url($imgurl);
  background-position: $xpos $ypos;
  display: block;
  float: left;
  height: $height;
  width: $width;    

  &:hover {
    background-position: 0px -$height;
  }

  & span {
    position: absolute;
    top: -999em;
  }
}

And my include:

a.facebook {
  @include social-button("../img/social-buttons.png",0px,0px,26px,26px);
}

If you'd like to see/use the spritesheet in action, I've uploaded it here: http://i49.tinypic.com/2evtbwp.png

Here's the HTML as well:

<a class="facebook" href="#"><span>Facebook</span></a>

Essentially the CSS output for the hover is displaying as this:

a.facebook:hover {
  background-position: -26px;
}

And in Firebug it displays as this:

a.facebook:hover {
    background-position: -26px center;
}

Any help is greatly appreciated, I'm pretty stumped on what I'm doing wrong at this point.. thanks!

PS. I'm going to be creating 5 of these, so I wouldn't mind creating a loop that could auto generate that for me, but at the present time it's not a huge deal, just need to get the hovers working first!

Klikster
  • 1,154
  • 12
  • 24
  • 2
    [compass is your friend for spriting](http://compass-style.org/help/tutorials/spriting/) but if you want a pure Sass solution [this](http://stackoverflow.com/questions/13407493/how-do-i-create-the-css-that-represents-a-sprite-image/13408276#13408276) might be helpful. – steveax Dec 12 '12 at 01:24

1 Answers1

8

You have to add parentheses around variables when you change them to negatives otherwise it just does the math (0px - $height):

background-position: 0px (-$height);

You probably want to fix the 0px, too.

cimmanon
  • 67,211
  • 17
  • 165
  • 171