Css SASS mixin中的背景位置问题

我正在创建一个SASS mixin，它可以让我拍摄一张社交媒体图标的精灵表并显示它们，但是当背景位置悬停在上面时，我遇到了一个问题，下面是SASS代码：

@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;
  }
}

我的建议包括：

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

如果您想查看/使用spritesheet，我已将其上载到此处：

以下是HTML：

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

在Firebug中，它显示如下：

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

非常感谢您的帮助，我很难说我现在做错了什么。。谢谢

---

另外，我将要创建其中的5个，所以我不介意创建一个可以自动生成的循环，但目前这不是一个大问题，只需要让悬停首先工作

当您将变量更改为负数时，必须在其周围添加括号，否则只需计算（0px-$height）：

---

您可能也想修复

0px

。

但如果您想要纯Sass解决方案，可能会有所帮助。太棒了，非常感谢！我也将0px切换到$xpos.：）

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

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