Media Queries in SCSS

_media.scss

// Media Queries in SCSS <https://css-tricks.com/approaches-media-queries-sass/#landon-schropps-technique>

// Variables
$tablet-width: 768px;
$desktop-width: 1024px;

@mixin tablet {
  @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
    @content;
  }
}

// Mixins
@mixin desktop {
  @media (min-width: #{$desktop-width}) {
    @content;
  }
}

//  How to use
//  @include tablet {
//    @content here
//  }


//  Output
//  @media (min-width: 768px) and (max-width: 950px) {
//    @content here
//  }