SASS mixin中的background-position问题

Question

我正在创建一个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);
}

如果您想查看/使用精灵图，请点击此处： 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;
}

非常感谢您的帮助，目前我对我的错误问题感到十分迷惑...谢谢！

另外，我将会创建5个类似的内容，所以我希望能够创建一个循环来自动生成这些内容，但是目前不是非常紧急，我只需要先让悬停效果能够正常运行就可以了！

- Klikster

---

使用compass进行雪碧图处理非常方便，它将成为您的好帮手。但如果您想要纯Sass解决方案，那么这个链接可能会有所帮助：http://stackoverflow.com/questions/13407493/how-do-i-create-the-css-that-represents-a-sprite-image/13408276#13408276。 - steveax

Answer 1

你需要在将变量转换为负数时在其周围添加括号，否则它只会执行数学运算（0px - $height）：

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

您可能还需要修复 0px。

- cimmanon

---

太棒了，非常感谢！我也将0像素切换为$xpos。 :) - Klikster