Responsive media queries ScSS

responsive.scss

$small-desktop: 960px;
$large-desktop: 1200px;
$tablet: 768px;
$tablets-landscape: 1024px;
$mobile: 480px;
$mobile-landscape: 640px;

@mixin response($media) {
  @if $media == largeDesktop {
    @media only screen and (min-width: $large-desktop) { @content }
  }
  @if $media == smallDesktop {
    @media only screen and (max-width: $small-desktop) { @content; }
  }
  @if $media == tablets {
    @media only screen and (max-width: $tablet) { @content; }
  }
  @if $media == tablets-landscape {
    @media only screen  and (min-device-width : $tablet)
                        and (max-device-width : $tablets-landscape)
                        and (orientation : landscape){ @content; }
  }
  @if $media == mobile {
    @media only screen and (max-width: $mobile) { @content; }
  }
  @if $media == mobile-portrait {
    @media only screen  and (max-width: $mobile)
                        and (orientation : portrait) { @content; }
  }
  @if $media == mobile-landscape {
    @media only screen  and (min-width: 320px)
                        and (max-width: $mobile-landscape)
                        and (orientation : landscape) { @content; }
  }
}