Using Compass to generate normal and retina sprite maps at once

_compass-retina-sprites.scss

@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;
      }
    }

  }
}

_sprites.scss

// 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, this is just PHPStorm not interpreting SASS correctly.

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

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.

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.

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

Many Thanks for sharing