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.