SASS - Media Query Mixin

sass-media-query-mixin

// Named Media Query
@mixin breakpoint($point) {
  @if $point == desktop {
    @media (min-width: 1200px) { @content; }
  }    
  @else if $point == tablet {
    @media (min-width: 768px) and (max-width: 1024px) { @content; }
  }
  @else if $point == phone {
    @media (max-width: 767px)  { @content; }
  }
  @else if $point == small_phone {
    @media (max-width: 480px)  { @content; }
  } 
  @else if $point == x_small_phone {
    @media (max-width: 300px)  { @content; }
  }     
}