Skip to content

Instantly share code, notes, and snippets.

@mattisfrommars
Created March 21, 2013 13:58
Show Gist options
  • Save mattisfrommars/5213187 to your computer and use it in GitHub Desktop.
Save mattisfrommars/5213187 to your computer and use it in GitHub Desktop.
Compass retina sprite mixin
/*
@author: Matt Jewell - mattjewell.co.uk
Borrows HEAVILY from thulstrup / compass-retina-sprites.scss https://gist.github.com/thulstrup/2140082
but ditches the media queries and serves retina to all
*/
// SET UP SPRITES
@import "autosprite/*.png";
$sprite-map: sprite-map("autosprite/*.png");
.sprite-spacing-retina-hack { @include sprite($sprite-map, sprite-spacer); }
/*
By including a 300x1px image in the sprite map, we know it's width will be 300px
so we can set the background-width to 150px
*/
$sprite-background-width: 300px;
@mixin retina-sprite ($name) {
background-image: sprite-url($sprite-map);
@include background-size($sprite-background-width/2);
$ypos: round(nth(sprite-position($sprite-map, $name), 2) /2);
background-position: 0 $ypos;
}
@mixin non-retina-sprite($name) {
@include sprite($sprite-map, $name);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment