Media Queries helper in your SCSS project

_media-queries.scss

// These mixins make media queries a breeze with SCSS.
// The media queries from mobile up until desktop all trigger at different points along the way.
// This helper is focused on mobile first. You style your block as it whould appear in mobile and then add CSS for how it scales up.
// 
// Example
//  .block {	
//	height: 250px;
//		
//		@include MQ(M) {
//			height: 300px;
//		}
//		
//		@include MQ(L) {
//			height: 320px;
//		}
//		
//		@include MQ(XL) {
//			height: 350px;
//		}
//		
//		@include MQ(XXL) {
//			height: 400px;
//		}
// }

// Breakpoints
// Change to your prefered breakpoints
$S:     480px;   
$M:     768px;     
$L:     1170px;
$XL:  	1400px;  
$XXL:  	1600px;     

// Media queries

@mixin MQ($canvas) {
  @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; } 
  }
  @else if $canvas == XL {
   @media only screen and (min-width: $XL) { @content; } 
  }
  @else if $canvas == XXL {
   @media only screen and (min-width: $XXL) { @content; } 
  }
}