SASS mixin for retina background-images in Ruby on Rails environments

mixin-background-image-retina.scss

// Original Source: https://gist.github.com/twe4ked
// Modified for assets pipelining on Ruby on Rails
// Added more options to pass

@mixin background-image-retina($file, $type, $width, $height, $positionX: left, $positionY: top, $background-repeat: no-repeat) {
  background-image: image-url($file + '.' + $type);
  background-size: $width $height;
  width: $width; height: $height;
  background-position: $positionX $positionY;
  background-repeat: $background-repeat;
 
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 144dpi) {
    & {
      background-image: image-url($file + '@2x.' + $type);
      background-size: $width*2 $height*2;
      width: $width*2; height: $height*2;
    }
  }
}



// USAGE //
// example.scss //
.some-block {
  @include background-image-retina('logo', 'png', 160px, 40px, right, top, repeat-x);
}

// output.css //
.some-block {
  background-image: url(/assets/logo.png);
  background-size: 160px 40px;
  width: 160px;
  height: 40px;
  background-position: right top;
  background-repeat: repeat-x;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 144dpi) {
  .some-block {
    background-image: url("/assets/[email protected]");
    background-size: 320px 80px;
    width: 320px;
    height: 80px;
  }
}

Great work!

In rails, this doesn't need to have an underscore in front of the file name? Also, where should it be included/imported? I appreciate the help.