Retina sprite background image mixin.

_retina-sprite-background.scss

/*
This pretty much doesn't work at all right now.
*/
@mixin retina-general-sprite($name, $set-dimensions: true) {
  $sprite-width: image-width('general.png');
  $sprite-height: image-height('general.png');
  
  $sprite-file-url: sprite-file($general-sprite, $name);
  $sprite-file-width: image-width($sprite-file-url) / 2;
  $sprite-file-height: image-height($sprite-file-url) / 2;
  
  @if $set-dimensions {
    display: block;
    width: $sprite-file-width;
    height: $sprite-file-height;
  }
  
  background: no-repeat image-url('general.png');
  background-position: sprite-position($general-sprite, $name);
//  background-size: 100%;
  background-size: $sprite-file-width $sprite-file-height;
}

config.rb

# Add this to the config.rb to remove the random string on the back of the sprite filename.
on_sprite_saved do |filename|
  if File.exists?(filename)
    FileUtils.mv filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')
  end
end

We do retina sprites by extending this class:

  background-image: asset-url("ui/sprite.png", image);

  @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-resolution: 240dpi) {
      background-image: asset-url("ui/sprite@2x.png", image);
      background-size: 222px 236px;
  }
}

Aargh. Syntax highlighting fail.

.sprite-image {
  background-image: asset-url("ui/sprite.png", image);

  @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-resolution: 240dpi) {
      background-image: asset-url("ui/sprite@2x.png", image);
      background-size: 222px 236px;
  }
}

Nice. This particular gist is all about Compass sprites (specifically for sprites named 'general'. Variable interpolation should be coming to Sass soon, which is why this mixin is really not as good as it could be)., so I do actually have general purpose mixins for standalone images. Here they are:

/*
  2x background mixin.
*/
@mixin background-2x($name) {
  @include squish-text;

  width: image-width($name) / 2;
  height: image-height($name) / 2;
  background: 0 0 no-repeat transparent inline-image($name);
  background-size: 100%;

  $url: image-url($name, true);

  .lt-ie9 & {
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#{$url}',sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#{$url}',sizingMethod='scale')";
  }
}

/*
  Retina mixin.
*/
@mixin retina($ratio: 1.3) {
  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
  only screen and (min--moz-device-pixel-ratio: $ratio),
  only screen and (-o-min-device-pixel-ratio: ($ratio * 10) / 10),
  only screen and (min-resolution: #{round($ratio * 96)}dpi),
  only screen and (min-resolution: #{$ratio}dppx) {
    @content;
  }
}

I realize this wasn't as clear as it could be, but by 'standalone images', I mean this could work for sprites that are not generated by Compass as well.