A file I have in my helpers that makes doing inline media queries pretty good :) extra-small, small, medium, large, larger, huge, massive

_mediaQueries.scss

/* ==========================================================================
  Media Queries:
 
  How to get inline media querey
 
  Order from small to big.
  extra-small, small, medium, large, larger, huge, massive.

  Should be noted when using min-width your styles outside any mediaqueries are the smallest and global.
 
  For best pratices media queries should be in em's, they shouldnt be relative to the design and not the popular devices.
  You may use pixels and swap them out at the end.
  
  You can call the below queries like below:
 
  e.g @include breakpoint(small) { width: 60%; }
 
  These breakpoints use min-width for mobile first approach to webdesign.
 
  Max-width: Is usually not the best practice for a responsive site as it requires lots of overide code.
 
  Obviously customise this to your design.

  ** If you need to add any more break points I currently suggest using number increaments like the following:**

  massive-01
  massive
  huge-02
  huge-01
  huge
  larger
  large-01
  large
  medium
  small
  extra-small
 
  ========================================================================== */
 
 
@mixin breakpoint($point) {
  @if $point == massive {
    @media (min-width: 120em) { @content; }
  }
 
  @else if $point == huge {
    @media (min-width: 100em) { @content; }
  }
 
  @else if $point == larger {
    @media (min-width: 75em)  { @content; }
  }
 
  @else if $point == large {
    @media (min-width: 60em)  { @content; }
  }
 
  @else if $point == medium {
    @media (min-width: 54em)  { @content; }
  }
 
  @else if $point == small {
    @media (min-width: 30em)  { @content; }
  }
 
  @else if $point == extra-small {
    @media (min-width: 20em)  { @content; }
  }
 
}

/* Example of all of the above

  @include breakpoint(massive) {
    font-size: 1.4em;
  }
 
  @include breakpoint(huge) {
    font-size: 1.4em;
  }
 
  @include breakpoint(larger) {
    font-size: 1.4em;
  }
 
  @include breakpoint(large) {
    font-size: 1.4em;
  }
 
  @include breakpoint(medium) {
    font-size: 1.4em;
  }
 
  @include breakpoint(small) {
    font-size: 1.4em;
  }
 
  @include breakpoint(extra-small) {
    font-size: 1.4em;
  }
 
*/