Skip to content

Instantly share code, notes, and snippets.

@estahn
Created October 5, 2012 00:32
Show Gist options
  • Save estahn/3837343 to your computer and use it in GitHub Desktop.
Save estahn/3837343 to your computer and use it in GitHub Desktop.
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);
@teejayhh
Copy link

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

@estahn
Copy link
Author

estahn commented Oct 12, 2012

teejayhh, this is just PHPStorm not interpreting SASS correctly.

@VictorGarcia
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

@estahn
Copy link
Author

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.

@kReEsTaL
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.

@c89williams
Copy link

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

@amitmadd
Copy link

Many Thanks for sharing

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