daniellima
New Member
I'm in the midst of creating a SASS mixin that will let me take a spritesheet of social media icons and display them, but I'm having an issue with the background-position when it's hovered over, here's the SASS code:\[code\]@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; }}\[/code\]And my include:\[code\]a.facebook { @include social-button("../img/social-buttons.png",0px,0px,26px,26px);}\[/code\]If you'd like to see/use the spritesheet in action, I've uploaded it here: http://i49.tinypic.com/2evtbwp.pngHere's the HTML as well:\[code\]<a class="facebook" href="http://stackoverflow.com/questions/13831109/#"><span>Facebook</span></a>\[/code\]Essentially the CSS output for the hover is displaying as this:\[code\]a.facebook:hover { background-position: -26px;} \[/code\]And in Firebug it displays as this:\[code\]a.facebook:hover { background-position: -26px center;}\[/code\]Any help is greatly appreciated, I'm pretty stumped on what I'm doing wrong at this point.. thanks!PS. I'm going to be creating 5 of these, so I wouldn't mind creating a loop that could auto generate that for me, but at the present time it's not a huge deal, just need to get the hovers working first!