@mixin retina-image-compat($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: '@2x') {
    background-image: url("#{$filename}.#{$extension}");

    @include hidpi {
        @if $retina-filename {
            background-image: url("#{$retina-filename}.#{$extension}");
        } @else {
            background-image: url("#{$filename}#{$retina-suffix}.#{$extension}");
        }

        background-size: $background-size;
      }
}

@mixin hidpi($ratio: 1.3) {
    @media only screen and (-webkit-min-device-pixel-ratio: $ratio), only screen and (min--moz-device-pixel-ratio: $ratio), only screen and (-o-min-device-pixel-ratio: #{$ratio}/1), only screen and (min-resolution: round($ratio * 96dpi)), only screen and (min-resolution: $ratio * 1dppx) { @content; }
}