Set a background image sized for retina screens, with an option to use the image url or an inline image.

retina-image.scss

/*
  Set a background image sized for retina screens, with an option to use the image url or an inline image.
  @param {String} $image Image to use.
  @param {String} [$type] Type of image url to use. Default to an inline image.
*/
@mixin retina-image($image, $type: 'inline') {
  @include hide-text;

  @if $type != 'inline' and $type != 'url' {
    @warn 'Unknown usage type. Falling back to "url"';
    $type: 'url';
  }
  
  width: image-width($image) / 2;
  height: image-height($image) / 2;
  
  @if $type == 'inline' {
    background: center center no-repeat inline-image($image);
  } @else if $type == 'url' {
    background: center center no-repeat image-url($image);
  }
  
  background-size: 100%;
}