Compass mixin for handling retina images.

retina.scss

/**
 * Bear in mind: this is NOT a way to address
 * issues with bandwidth and sending large
 * images to a mobile browser.
 *
 * For a great discussion of that, check out this A List Apart
 * article by Dave Rupert: http://bit.ly/QGfJk4
 *
 * The media query is based on the snippet recently posted by Chris
 * Coyier on CSS Tricks: http://bit.ly/QGg71V
 */

@import 'compass/utilities/text/replacement';

// The mixin. You can put this wherever you like in your filesystem
// as long as it's imported prior to being called.

@mixin replace-text-with-dimensions-for-retina($image-standard, $image-retina) {
    @include replace-text-with-dimensions($image-standard);
    @media
        only screen and (-webkit-min-device-pixel-ratio: 2),
        only screen and (   -moz-min-device-pixel-ratio: 2),
        only screen and (     -o-min-device-pixel-ratio: 2),
        only screen and (        min-device-pixel-ratio: 2),
        only screen and (           min-resolution: 192dpi),
        only screen and (           min-resolution: 2dppx) {
            background-image: image-url($image-retina);
            background-size: 100% 100%;
        }
}

// Usage:

#logo {
    @include replace-text-with-dimensions-for-retina('image.png', 'image@2x.png');
}

Hey! Thanks for the mixin, it was exactly what I was looking for.

I suggest replacing your import with @import 'compass/typography/text/replacement' since your's is deprecated !