Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
SCSS and Compass retina sprites
@import "compass/reset";
@import "compass/utilities/sprites";
@import "compass/css3/background-size";
$icons-spacing: 5px;
$sprites : sprite-map("icons/*.png");
@mixin retina-sprite($name) {
$name : $name;
background-image: sprite-url($sprites);
width: image-width(sprite-file($sprites, $name)) / 2;
height: image-height(sprite-file($sprites, $name)) / 2;
$ypos: nth(sprite-position($sprites, $name), 2) / 2;
background-position: 0 $ypos;
@include background-size(ceil(image-width(sprite-path($sprites)) / 2), auto);
}
Owner

jornki commented Nov 7, 2012

usage: "@include retina(spritename);"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment