Issue with background-position in SASS mixin

Question

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!

Answer 1

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.