Skip to content

Instantly share code, notes, and snippets.

@oti
Created August 13, 2015 09:29
Show Gist options
  • Save oti/b45f128482a4f26c6ec0 to your computer and use it in GitHub Desktop.
Save oti/b45f128482a4f26c6ec0 to your computer and use it in GitHub Desktop.
spritesmith retina sprite mixin
// http://blog.webcreativepark.net/2014/04/06-190024.html
// @include sprite($a);
@mixin r-sprite-width($sprite) {
width: nth($sprite, 5)/2;
}
@mixin r-sprite-height($sprite) {
height: nth($sprite, 6)/2;
}
@mixin r-sprite-position($sprite) {
$sprite-offset-x: nth($sprite, 3)/2;
$sprite-offset-y: nth($sprite, 4)/2;
background-position: $sprite-offset-x $sprite-offset-y;
}
@mixin r-sprite-size($sprite) {
background-size: nth($sprite, 7)/2 nth($sprite, 8)/2;
}
@mixin r-sprite($sprite) {
@include r-sprite-image($sprite);
@include r-sprite-position($sprite);
@include r-sprite-width($sprite);
@include r-sprite-height($sprite);
@include r-sprite-size($sprite);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment