Media Queries in Sass

_media-queries.scss

$mq-mobile-portrait: 320px !default;
$mq-mobile-landscape: 480px !default;
$mq-tablet-portrait: 768px !default;
$mq-tablet-landscape: 1024px !default;
$mq-iphone5: 1136px !default;
$mq-desktop: 1382px !default;

@mixin mobile-only {
  @media (max-width: $mq-mobile-landscape) {
    @content;
  }
}

@mixin mobile-portrait-only {
  @media (max-width: $mq-mobile-portrait) {
    @content;
  }
}

@mixin mobile-portrait-and-below {
  @media (max-width: $mq-mobile-portrait) {
    @content;
  }
}

@mixin mobile-portrait-and-up {
  @media (min-width: $mq-mobile-portrait) {
    @content;
  }
}

@mixin mobile-landscape-only {
  @media only all and (min-width: $mq-mobile-portrait + 1) and (max-width: $mq-mobile-landscape) {
    @content;
  }
}

@mixin mobile-landscape-and-below {
  @media only all and (max-width: $mq-mobile-landscape) {
    @content;
  }
}

@mixin mobile-landscape-and-up {
  @media only all and (min-width: $mq-mobile-portrait + 1) {
    @content;
  }
}

@mixin tablet-only {
  @media only all and (min-width: $mq-mobile-landscape + 1) and (max-width: $mq-tablet-landscape) {
    @content;
  }
}

@mixin tablet-portrait-only {
  @media only all and (min-width: $mq-mobile-landscape + 1) and (max-width: $mq-tablet-portrait) {
    @content;
  }
}

@mixin tablet-portrait-and-below {
  @media only all and (max-width: $mq-tablet-portrait) {
    @content;
  }
}

@mixin tablet-portrait-and-up {
  @media only all and (min-width: $mq-mobile-landscape + 1) {
    @content;
  }
}

@mixin tablet-landscape-only {
  @media only all and (min-width: $mq-tablet-portrait + 1) and (max-width: $mq-tablet-landscape) {
    @content;
  }
}

@mixin tablet-landscape-and-below {
  @media only all and (max-width: $mq-tablet-landscape) {
    @content;
  }
}

@mixin tablet-landscape-and-up {
  @media only all and (min-width: $mq-tablet-portrait + 1) {
    @content;
  }
}

@mixin desktop-and-up {
  @media only all and (min-width: $mq-tablet-landscape + 1) {
    @content;
  }
}

@mixin desktop-and-below {
  @media only all and (max-width: $mq-desktop) {
    @content;
  }
}

@mixin desktop-only {
  @media only all and (min-width: $mq-tablet-landscape + 1) and (max-width: $mq-desktop) {
    @content;
  }
}

@mixin retina {
  @media only all and (-webkit-min-device-pixel-ratio: 1.5), only all and (min-device-pixel-ratio: 1.5) {
    @content;
  }
}

@mixin iphone5-landscape {
  @media all and (device-aspect-ratio: 40 / 71) and (orientation: landscape) {
    @content;
  }
}