SASS mixin中的背景位置问题

Posted 2023-05-08

【中文标题】SASS mixin中的背景位置问题

【英文标题】：Issue with background-position in SASS mixin

【发布时间】：2012-11-29 15:31:04

【问题描述】：

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

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

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

【问题讨论】：

compass is your friend for spriting 但如果你想要一个纯 Sass 解决方案 this 可能会有所帮助。

【参考方案1】：

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

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

您可能也想修复0px。

【讨论】：

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