The non-clunky approach to supporting retina images in SASS.

sass_retinize.rb

module Sass::Script::Functions

  # Appends "_2x" to the end of a filename before the extension
  # e.g. foobar.jpg => foobar_2x.jpg
  def retinize(string)
    assert_type string, :String
    Sass::Script::String.new string.value.gsub(/\.(\w+)$/, '_2x.\\1')
  end

  declare :retinize, :args => [:string]
end

sass_retinize_example.scss

// DRY retina media queries
@mixin media-retina {
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    @content;
  }
}

@mixin retina-bg-image($image, $size) {
  background-image: url($image);
  background-size: $size;
  
  @include media-retina {
    background-image: url(retinize($image));
  }
}