Skip to content

Instantly share code, notes, and snippets.

Embed
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);
@digerata

This comment has been minimized.

Copy link

commented Oct 8, 2012

You rock!

@teejayhh

This comment has been minimized.

Copy link

commented Oct 10, 2012

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

@estahn

This comment has been minimized.

Copy link
Owner Author

commented Oct 12, 2012

teejayhh, this is just PHPStorm not interpreting SASS correctly.

@VictorGarcia

This comment has been minimized.

Copy link

commented Oct 28, 2012

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

This comment has been minimized.

Copy link
Owner Author

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

This comment has been minimized.

Copy link

commented Dec 30, 2012

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

This comment has been minimized.

Copy link

commented Oct 23, 2013

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

@amitmadd

This comment has been minimized.

Copy link

commented Jan 17, 2015

Many Thanks for sharing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.