Simple retina backgrounds with sass

sass.rb

require 'sass_extensions'

sass_extensions.rb

module Sass::Script::Functions
  def gsub(string, regexp, replacement)
    Sass::Script::String.new(string.value.gsub(Regexp.new(regexp.value), replacement.value))
  end
  declare :gsub, args: [:string, :regexp, :replacement]
end

whatevs.css.sass

@mixin image-replacement
  display: block
  text-indent: -9999px
  outline: none

@mixin bg($name, $left: left, $top: top, $repeat: no-repeat, $retina: true)
  background-image: image-url($name)
  background-position: $left $top
  background-repeat: $repeat
  @if $retina
    $retina-name: gsub($name, "(.*)\.([a-zA-Z]+)", "\1@2x.\2")
    @media only screen and (-webkit-min-device-pixel-ratio: 2)
      background-image: image-url($retina-name)
      background-size: image-width($name) image-height($name)

@mixin sheet($width, $height, $left, $top, $image-replacement: true)
  @if $image-replacement
    +image-replacement
  width: $width
  height: $height
  +bg("spritesheet.png", $left, $top, no-repeat, true)