Media Query Mixin

Media Query Mixin

// Media Query Variables
$XS: 580px;
$S: 768px;
$M: 992px;
$L: 1200px;
$XL: 1440px;

// Media Query Mixin
@mixin MQ($canvas){
  @if $canvas == XS{
     @media only screen and (min-width: $XS) { @content; }
  }
  @else if $canvas == S{
     @media only screen and (min-width: $S) { @content; }
  }
  @else if $canvas == Sneg{
    @media only screen and (max-width: $Sneg - 1) { @content; }
  }
  @else if $canvas == M{
     @media only screen and (min-width: $M) { @content; }
  }
  @else if $canvas == L{
     @media only screen and (min-width: $L) { @content; }
  }
  @else if $canvas == XL{
     @media only screen and (min-width: $XL) { @content; }
  }
}