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

回答

相關問題