// breakpoints
$XS:    350px;     
$S:     480px;   
$M:     768px;     
$L:     1170px;     

// media queries

@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 == M {
   @media only screen and (min-width: $M) { @content; } 
  }
  @else if $canvas == L {
   @media only screen and (min-width: $L) { @content; } 
  }
}
@mixin _MQ($canvas) {
  @if $canvas == XS {
   @media only screen and (max-width: $XS) { @content; } 
  }	
  @else if $canvas == S {
   @media only screen and (max-width: $S) { @content; } 
  }
  @else if $canvas == M {
   @media only screen and (max-width: $M) { @content; } 
  }
  @else if $canvas == L {
   @media only screen and (max-width: $L) { @content; } 
  }
}
// super light grid system

@mixin column($percentage, $float-direction:left) {
  width: 100% * $percentage;
  float: $float-direction;
}

