Media Queries

functions.scss

@function get-breakpoint($orientation, $breakpoint) {
  @return map-get(map-get($breakpoints, $orientation), $breakpoint);
}

input.scss

.under-width {
  @include under(small) {
    font-size: 14px;
  }
}

.between-width {
  @include between(small, medium) {
    font-size: 14px;
  }
}

.above-width {
  @include above(large) {
    font-size: 14px;
  }
}

.under-height {
  @include v-under(small) {
    font-size: 14px;
  }
}

.between-height {
  @include v-between(small, medium) {
    font-size: 14px;
  }
}

.above-height {
  @include v-above(large) {
    font-size: 14px;
  }
}

.mixed-queries {
  @include above(medium) {
    @include v-under(small) {
      font-size: 12px;
    }
    @include hd() {
      background-image: url("image@2x.png");
    }
    @include uhd() {
      background-image: url("image@3x.png");
    }
  }
}

mixins.scss

@mixin under($breakpoint) {
  $max-width: (get-breakpoint("horizontal", $breakpoint) - 1);
  @media screen and (max-width: $max-width) {
    @content;
  }
}

@mixin between($min-breakpoint, $max-breakpoint) {
  $min-width: get-breakpoint("horizontal", $min-breakpoint);
  $max-width: (get-breakpoint("horizontal", $max-breakpoint) - 1);
  @media screen and (min-width: $min-width) and (max-width: $max-width) {
   @content;
  }
}

@mixin above($breakpoint) {
  $min-width: get-breakpoint("horizontal", $breakpoint);
  @media screen and (min-width: $min-width) {
    @content;
  }
}

@mixin v-under($breakpoint) {
  $max-height: (get-breakpoint("vertical", $breakpoint) - 1);
  @media screen and (max-height: $max-height) {
    @content;
  }
}

@mixin v-between($min-breakpoint, $max-breakpoint) {
  $min-height: get-breakpoint("vertical", $min-breakpoint);
  $max-height: (get-breakpoint("vertical", $max-breakpoint) - 1);
  @media screen and (min-height: $min-height) and (max-height: $max-height) {
   @content;
  }
}

@mixin v-above($breakpoint) {
  $min-height: get-breakpoint("vertical", $breakpoint);
  @media screen and (min-height: $min-height) {
    @content;
  }
}

@mixin hd() {
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
    @content;
  }
}

@mixin uhd() {
  @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi), (min-resolution: 3dppx) {
    @content;
  }
}

output.css

@media screen and (max-width: 399px) {
  .under-width {
    font-size: 14px;
  }
}

@media screen and (min-width: 400px) and (max-width: 749px) {
  .between-width {
    font-size: 14px;
  }
}

@media screen and (min-width: 900px) {
  .above-width {
    font-size: 14px;
  }
}

@media screen and (max-height: 499px) {
  .under-height {
    font-size: 14px;
  }
}

@media screen and (min-height: 500px) and (max-height: 699px) {
  .between-height {
    font-size: 14px;
  }
}

@media screen and (min-height: 900px) {
  .above-height {
    font-size: 14px;
  }
}

@media screen and (min-width: 750px) and (max-height: 499px) {
  .mixed-queries {
    font-size: 12px;
  }
}
@media screen and (min-width: 750px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 750px) and (min-resolution: 192dpi), screen and (min-width: 750px) and (min-resolution: 2dppx) {
  .mixed-queries {
    background-image: url("image@2x.png");
  }
}
@media screen and (min-width: 750px) and (-webkit-min-device-pixel-ratio: 3), screen and (min-width: 750px) and (min-resolution: 350dpi), screen and (min-width: 750px) and (min-resolution: 3dppx) {
  .mixed-queries {
    background-image: url("image@3x.png");
  }
}

variables.scss

$breakpoints: (
  "horizontal": (
    "small": 400px,
    "medium": 750px,
    "large": 900px
  ),
  "vertical": (
    "small": 500px,
    "medium": 700px,
    "large": 900px
  )
);