Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Retina Sprite CSS with Compass
// 1: To export the PNGs in different sizes I used Slicy - http://macrabbit.com/slicy/ - a mac app that looks into your PSD and if it finds any layer with .png extention will export that layer to PNG. You can also add a tag to the main group layer to export retina version too. A bit pricy, but it's fine if you value your time.
// 2: I added the icons in two folders (retina and normal) You just have to make sure that both folders contain the same number of files and they both have the same file name inside.
// 3: I added this code after long time of searchin, testing, and mashing my head into the wall.
$naviconsNormal: sprite-map("navicons/normal/*.png", $spacing: 10px);
$naviconsRetina: sprite-map("navicons/retina/*.png", $spacing: 20px);
.icn{
background: $naviconsNormal;
display: inline-block; // or block
@include bp-retina {
background: $naviconsRetina;
//Instead of sprite-path might be sprite-url
@include background-size(image-width(sprite-path($naviconsNormal)) image-height(sprite-path($naviconsNormal)));
}
}
@each $i in sprite_names($naviconsNormal){
.icn-#{$i}{
background-position: sprite-position($naviconsNormal, $i);
@include sprite-dimensions($naviconsNormal, $i);
}
}
@include bp-retina {
@each $i in sprite_names($naviconsNormal){
.icn-#{$i}{
$ypos: round(nth(sprite-position($naviconsRetina, $i), 2) / 2);
background-position: 0 $ypos;
}
}
}
//The @include bp-retina it's a mixin for retina screens media query.
//Huge thanks to:
//Rasmus Thulstrup
//https://gist.github.com/thulstrup/2140082
//and
//Alan Hogan
//https://gist.github.com/alanhogan/2878758
@nesk

This comment has been minimized.

Copy link

@nesk nesk commented Aug 22, 2014

Thank you! I was wondering how to create a sprite only retina, I took your code and adapted it to my needs, it works perfectly now.

@adrianenriquez

This comment has been minimized.

Copy link

@adrianenriquez adrianenriquez commented Sep 11, 2014

I tried https://gist.github.com/thulstrup/2140082 before and gives me an error when running grunt serve. I hope this works.

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