Skip to content

Instantly share code, notes, and snippets.

@markbrown4
Created October 12, 2012 05:57
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save markbrown4/3877549 to your computer and use it in GitHub Desktop.
Save markbrown4/3877549 to your computer and use it in GitHub Desktop.
retina sprite mixin with Compass
@mixin icon-sprite-2x($sprite) {
$sprites: sprite-map("icon/*.png");
text-indent: -9999px !important;
@include icon-sprite($sprite);
background-position: 0 round(nth(sprite-position($sprites, $sprite), 2) / 2);
height: image-height(sprite-file($sprites, $sprite)) / 2;
width: image-width(sprite-file($sprites, $sprite)) / 2;
background-size: (image-width(sprite-path($icon-sprites)) / 2) auto;
.ie & {
background-image: image-url("icon-1x/#{$sprite}.png") !important;
background-position: 0 round(nth(sprite-position($sprites, $sprite), 2));
}
}
// usage
.github { @include icon-sprite-2x(github) }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment