//variables
$mobile: 320px;
$tablet: 768px
$desktop: 1200px;

//mixin
@mixin MQ($canvas) {
  @else if $canvas == mobile {
    @media only screen and (min-width: $mobile) and (max-width: $mobile - 1) { @content; }
  }
  @else if $canvas == tablet {
    @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @content; }
  }
  @else if $canvas == desktop {
    @media only screen and (min-width: $desktop) { @content; }
  }

  @else if $canvas == mobilePlus {
    @media only screen and (min-width: $mobile) { @content; }
  }
  @else if $canvas == tabletPlus {
    @media only screen and (min-width: $tablet) { @content; }
  }
  @else if $canvas == desktopPlus {
    @media only screen and (min-width: $desktop) { @content; }
  }

  @else if $canvas == mobileNeg {
    @media only screen and (max-width: $mobile) { @content; }
  }
  @else if $canvas == tabletNeg {
    @media only screen and (max-width: $tablet) { @content; }
  }
  @else if $canvas == desktopNeg {
    @media only screen and (max-width: $desktop) { @content; }
  }
}

//demonstration of use
.h1 {
  @include MQ(mobile) {
    font-size: 0.9em;
  }
  @include MQ(tabletPlus) {
    font-size: 1em;
  }
  @include MQ(desktopNeg) {
    font-size: 1.1em;
  }
}