SASS中背景位置的问题mixin

我正在创建一个SASS mixin，它可以让我拍摄社交媒体图标的spritesheet并显示它们，但我在背景位置时遇到了问题它的上空盘旋，这里的SASS代码：SASS中背景位置的问题mixin

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

来源

2012-12-12 Jassi

[指南针是你的朋友spriting]（http://compass-style.org/help/tutorials/spriting/），但如果你想要一个纯粹的Sass解决方案[this]（http://stackoverflow.com/questions）/13407493/how-do-i-create-the-css-that-represent-a-sprite-image/13408276＃13408276）可能会有所帮助。 – steveax

您必须添加变量左右括号，当你改变他们的底片，否则它只是做数学（0像素 - $高度）：

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

你可能想修复0px了。

来源

2012-12-12 01:29:54 cimmanon

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

SASS中背景位置的问题mixin

回答

相关问题