SCSS media mixin

base.scss

#sidebar {
  float: left;
  width: 300px;
  @include respond-to(tablet-p) { float: none; }
  @include respond-to(tablet-l) { float: none; }
  @include respond-to(mobile-p) { width: 240px; }
}

mixin.scss

@mixin respond-to($media) {
    @if $media == tablet-p {
        @media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { @content; }
    } @else if $media == tablet-l {
        @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { @content; }
    } @else if $media == mobile-p {
        @media (min-width: 320px) and (max-width: 480px) { @content; }
    } @else if $media == mobile-l {
        @media (min-width: 481px) and (max-width: 767px) { @content; }
    }
}