Background sprite with retina ready SASS @mixin - http://sassmeister.com/gist/8433951.

input.scss

$global-sprite-name: 'global_sprite';
$global-sprite-type: "png";
$global-sprite-size: 600px 600px;

@mixin bg-sprite($x: 0, $y: 0, $retina: false) {
  $file-type: $global-sprite-type;
  background: url('../images/' + $global-sprite-name + '.' + $file-type) $x $y no-repeat;
  background-size: 600px 600px;
  @if $retina == true {
    @media 
      (min--moz-device-pixel-ratio: 1.3),
      (-o-min-device-pixel-ratio: 2.6/2),
      (-webkit-min-device-pixel-ratio: 1.3),
      (min-device-pixel-ratio: 1.3),
      (min-resolution: 1.3dppx) {
        background: url('../images/' + $global-sprite-name + '@2x' + '.' + $file-type) $x $y no-repeat;
    }
  }
}

.block {
  @include bg-sprite(-158px, -32px, true);
  width: 30px; height: 30px;
}

output.css

.block {
  background: url("../images/global_sprite.png") -158px -32px no-repeat;
  background-size: 600px 600px;
  width: 30px;
  height: 30px;
}
@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .block {
    background: url("../images/[email protected]") -158px -32px no-repeat;
  }
}