css - SASS mixin中的背景位置问题

Question

我正在创建一个 SASS mixin，它可以让我获取社交媒体图标的 spritesheet 并显示它们，但是当它悬停在背景位置时我遇到了问题，这是 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，我已将其上传到此处:http://i49.tinypic.com/2evtbwp.png

这也是 HTML:

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

基本上悬停的 CSS 输出显示如下:

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

在 Firebug 中显示如下:

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

任何帮助都非常感谢，我很困惑我在这一点上做错了什么......谢谢!

PS。我将创建其中的 5 个，所以我不介意创建一个可以为我自动生成的循环，但目前这并不是什么大不了的事，只需要先让悬停工作!

Answer 1

当您将变量更改为负数时，您必须在变量周围添加括号，否则它只会做数学运算(0px - $height):

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

您可能也想修复 0px。