Generated by SassMeister.com.

SassMeister-input.scss

@mixin background-image-retina($type, $file, $color, $ext) {
    background-image: url('src/assets/images/#{$type}/#{$file}-#{$color}.#{$ext}');
    background-image: url('src/assets/images/' + $type + '/' + $file + '-' + $color + '.' + $ext);
     
     @media only screen and (-webkit-min-device-pixel-ratio: 2),
        only screen and (-moz-min-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('src/assets/images/#{$type}/#{$file}-#{$color}@2x.#{$type}');
              background-image: url('src/assets/images/' + $type + '/' + $file + '-' + $color + '@2x.' + $type);
          }
     }                                                                          
}

 .hey { @include background-image-retina(icon, close, black, png); }

SassMeister-output.css

.hey {
  background-image: url("src/assets/images/icon/close-black.png");
  background-image: url("src/assets/images/icon/close-black.png");
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-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) {
  .hey {
    background-image: url("src/assets/images/icon/close-black@2x.icon");
    background-image: url("src/assets/images/icon/close-black@2x.icon");
  }
}