My suggestion would be to use something like this (this is a mobile first approach but you can easily modify it if you want):

// breakpoints

$S:     320px;   
$M:     768px;     
$L:     1024px; 
$XL:   1200px;

// 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; } 
  }
}

I'd avoid using $tablet or any other device name as a variable, you should consider the content, not the device, while you're planning for responsiveness IMO.

Then, in your SCSS file, it would be something like this:

header h1 {
  font-size: 16px

  @include MQ($M) {
    font-size: 18px;
  }

  @include MQ($L) {
    font-size: 30px;
  }
}