SCSS @media mixin

mixin-media.scss

// The Mixin:
@mixin bp($type) {
  @if $type == small {
    @media (min-width: 24em) { @content; }
  }
  @else if $type == medium {
    @media (min-width: 46.8em) { @content; }
  }
  @else if $type == large {
    @media (min-width: 50em)  { @content; }
  }
}

// Use:
selector {

  @include bp(small) {
    
  }
  @include bp(medium) {
    
  }
  @include bp(large) {
    
  }
}