SASS mixin中背景位置的问题-Java 学习之路

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

如果您在这里上传了它：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个，所以我不介意创建一个可以自动为我生成的循环，但是目前这不是一个大问题，只需要让悬停工作首先！

1 回答

7
当您将变量更改为负数时，您必须在变量周围添加括号，否则它只是进行数学运算（0px - $ height）：
```
background-position: 0px (-$height);
```
您可能也想修复 0px .
回复于 2024-05-04T20:21:31+08:00

SASS mixin中背景位置的问题

1 回答

相关问题