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);

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