Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Using Compass to generate normal and retina sprite maps at once
@mixin all-retina-sprites($map, $map2x) {
@media (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 1.5dppx) {
$base-class: sprite-map-name($map);
.#{$base-class}-all-retina-sprites {
background-image: sprite-url($map2x);
@include background-size(ceil(image-width(sprite-path($map2x)) / 2) auto);
@each $sprite in sprite-names($map) {
.#{$base-class}-#{$sprite} {
@extend .#{$base-class}-all-retina-sprites;
$position: sprite-position($map2x, $sprite);
background-position: nth($position, 1) nth($position, 2) / 2;
// Sprite set: General
// ----------------------------------------
//$general-layout: smart;
$general-spacing: 1px;
$general-sprite-dimensions: true;
@import "general/*.png";
@include all-general-sprites;
$general-retina-spacing: 1px;
$general-retina-sprite-dimensions: true;
@import "general-retina/*.png";
//@include all-general-retina-sprites;
@include all-retina-sprites($general-sprites, $general-retina-sprites);
Copy link

digerata commented Oct 8, 2012

You rock!

Copy link

cant get it to work, i have sytax errors. but maybe my phpstorm fails to interpret it properly.

Copy link

estahn commented Oct 12, 2012

teejayhh, this is just PHPStorm not interpreting SASS correctly.

Copy link

Hey Enrico,

I've found an issue with your gist. Compass will not always generate both sprites with the images in the same order, so the background-position was not working correctly for me on retina. The problem is on line 17 where you are assuming that the layout is the same in both sprites.

I found this workaround that is working correctly for me:

@if (sprite-position($map, $sprite) != sprite-position($map2x, $sprite)) {
$ypos: round(nth(sprite-position($map2x, $sprite), 2) / 2);
background-position: 0 $ypos;
} @else {
@include sprite($map2x, $sprite);

Anyway, the gist is awesome apart from that, thanks so much! :D

Copy link

estahn commented Nov 14, 2012

Victor, I had issues with this Gist as well. But the issue was caused by the background-size definition. The background-size is now defined for global sprite-map instead of each sprite definition.

Copy link

Hi Enrico,

First, thanks a lot for sharing your mixin, it's very useful!

However I still have a problem about right positioning sprites. I.e. if I have :

$icon-spacing: 60px; $icon-external-position: 100%; @import "icon/*.png"; @include all-icon-sprites;
This is what I want to achieve:

.icon-external { background-position: 100% -360px; }

But your mixin does compile to this:

.icon-external { background-position: -20px -360px; }

Any idea on how to solve this please?

NB: the external icon is well positioned on the sprite image, it's juste the CSS that doesn't match.

Copy link

This gist is perfect for what I needed! Thank you.

Copy link

Many Thanks for sharing

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