2x-mixin.scss

div {
  @include image-2x("logo.png", "logo2x.png");
}

@mixin image-2x($image1, $image2) {
  background-image: url($image);
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {  
    background-image: url($image2);
    background-size: image-width($image1) image-height($image1);
  }
}

div {
  .image-2x("logo.png", "logo2x.png");
}

// http://css-tricks.com/snippets/css/retina-display-media-query/
.image-2x(@image1, @image2, @img1-width: 50%, @img1-height: 50%) {
  background-image: url(@image);
  @media only screen and (-webkit-min-device-pixel-ratio: 2),
        only screen and (   min--moz-device-pixel-ratio: 2),
        only screen and (     -o-min-device-pixel-ratio: 2/1),
        only screen and (        min-device-pixel-ratio: 2),
        only screen and (                min-resolution: 192dpi),
        only screen and (                min-resolution: 2dppx) {  
    background-image: url(@image2);
    background-size: @img1-width @img1-height;
  }
}