Реализация медиа-выражений на SCSS, учитывая разрешения экранов для возможной подмены изображений на более качественные. Implementation of media queries with SCSS, given the screen resolution for a possible substitution for higher quality images.

0_mediaqueries.scss

// Media Widths

@function device-width($media) {
  @if $media == small {
    @return 200px;
  } @else if $media == medium {
    @return 660px;
  } @else if $media == large {
    @return 1000px;
  }
}

@function o-px-ratio($res) {
  $resRatio: $res*10;
  @return #{$resRatio}/10;
}

@function resolution-dpi($res) {
  @return $res*96dpi;
}

@function resolution-dppx($res) {
  @return #{$res}dppx;
}

@mixin respond-to($media, $resolution: null) { 
  $device-width: device-width($media);
    @if $resolution {
      @media only screen and (min-width: $device-width) and (-webkit-min-device-pixel-ratio: $resolution), only screen and (min-width: $device-width) and (min--moz-device-pixel-ratio: $resolution), only screen and (min-width: $device-width) and (-o-min-device-pixel-ratio: o-px-ratio($resolution)), only screen and (min-width: $device-width) and (min-device-pixel-ratio: $resolution), only screen and (min-width: $device-width) and (min-resolution: resolution-dpi($resolution)), only screen and (min-width: $device-width) and (min-resolution: resolution-dppx($resolution)) { @content; }
    } @else {
      @media only screen and (min-width: $device-width) { @content; }
    }
}

1-usecase.scss

.logo {
    margin: 50px auto;
    width: 280px;
    height: 111px;
    background: url(../img/logo280x111@1x.png) 0 0 no-repeat;
    &>img {
        display: none;
    }
    @include respond-to(small) {
      background: url(../img/logo360x144@1x.png) 0 0 no-repeat;
      width: 360px;
      height: 144px;
    }
    @include respond-to(small, 1.5) {
      background: url(../img/logo360x144@2x.png) 0 0 no-repeat;
      width: 360px;
      height: 144px;
      -webkit-background-size: contain;
      background-size: contain;
    }
}

2-result.css

.logo {
  margin: 50px auto;
  width: 280px;
  height: 111px;
  background: url(../img/logo280x111@1x.png) 0 0 no-repeat;
}
/* line 131, ../scss/app.scss */
.logo > img {
  display: none;
}
@media only screen and (min-width: 320px) {
  /* line 126, ../scss/app.scss */
  .logo {
    background: url(../img/logo360x144@1x.png) 0 0 no-repeat;
    width: 360px;
    height: 144px;
  }
}
@media only screen and (min-width: 320px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 320px) and (min--moz-device-pixel-ratio: 1.5), only screen and (min-width: 320px) and (-o-min-device-pixel-ratio: 15 / 10), only screen and (min-width: 320px) and (min-device-pixel-ratio: 1.5), only screen and (min-width: 320px) and (min-resolution: 144dpi), only screen and (min-width: 320px) and (min-resolution: 1.5dppx) {
  /* line 126, ../scss/app.scss */
  .logo {
    background: url(../img/logo360x144@2x.png) 0 0 no-repeat;
    width: 360px;
    height: 144px;
    -webkit-background-size: contain;
    background-size: contain;
  }
}