Sass media query mixin

layout.scss

// -----------------------------------------------------

// Extra small screen / phone
$screen-xs: 480px;

// Small screen / tablet
$screen-sm: 768px;

// Medium screen / desktop
$screen-md: 992px;

// Large screen / wide desktop
$screen-lg: 1200px;

// So media queries don't overlap when required, provide a maximum
$screen-xs-max:              ($screen-sm - 1);
$screen-sm-max:              ($screen-md - 1);
$screen-md-max:              ($screen-lg - 1);

// -----------------------------------------------------

// media queries

@mixin MQ($canvas) {
  @if $canvas == XS {
    @media (max-width: $screen-xs-max){ @content; }
  }
  @else if $canvas == SM {
    @media (min-width: $screen-sm) and (max-width: $screen-sm-max) { @content; }
  }
  @else if $canvas == MD {
    @media (min-width: $screen-md) and (max-width: $screen-md-max) { @content; }
  }
  @else if $canvas == LG {
    @media (min-width: $screen-lg){@content;}
  }
}


/*
Usage : 

// Extra small screen / phone
@include MQ(XS) {
    display: none;
}


//Small screen / tablet
@include MQ(SM) {
    display: none;
}

// Medium screen / desktop
@include MQ(MD) {
    display: none;
}

// Large screen / wide desktop
@include MQ(LG) {
    display: none;
}

*************************************************************/

Usage

Usage :

// Extra small screen / phone
@include MQ(XS) {
display: none;
}

// Small screen / tablet
@include MQ(SM) {
display: none;
}

// Medium screen / desktop
@include MQ(MD) {
display: none;
}

// Large screen / wide desktop
@include MQ(LG) {
display: none;
}