SASS resolution media query mixin

exampleHiResInclude.scss

section {
  // only include 1x size image for 'non-retina' screens
  @include if-max-resolution(1.49) {
    background-image: url('img/section-anchor@1x.png');
  }
  // only include 2x size image for 'retina' screens
  @include if-min-resolution(1.5) {
    background-image: url('img/section-anchor@2x.png');
    background-size: 10.5625rem 1.5625rem;
  }
}

hiResMixin.scss

@mixin if-min-resolution($dppx) {
  @include if-resolution(min, $dppx) {
    @content;
  }
}
 
@mixin if-max-resolution($dppx) {
  @include if-resolution(max, $dppx) {
    @content;
  }
}
 
@mixin if-resolution($prefix, $dppx) {
  // 1px = 96dpi
  $dpi: $dppx * 96;
  @media
    (-webkit-#{$prefix}-device-pixel-ratio: #{$dppx}),
    (   #{$prefix}--moz-device-pixel-ratio: #{$dppx}),
    (     -o-#{$prefix}-device-pixel-ratio: #{$dppx*2}/2),
    (        #{$prefix}-device-pixel-ratio: #{$dppx}),
    (                #{$prefix}-resolution: #{$dpi}dpi),
    (                #{$prefix}-resolution: #{$dppx}dppx) { 
      @content;
  }
}