breakpoint.scss

// Viewport sizes
$vp1 : 40em;
$vp2 : 60em;

@mixin breakpoint($min:$vp1, $max:null) {
  // for max-width
  @if $min == max {
    @media (max-width: $max) { @content; }
  }
  
  // min & max-width
  @elseif ($min) and ($max) {
    @media (min-width: $min) and (max-width: $max) { @content; }
  }
  
  // min-width (default)
  @else {
    @media (min-width: $min) { @content; }
  }
}




/**
 *  Examples
 */
 
// default (min-width at $vp1)
@include breakpoint() {
  background: yellow;
}

// min-width at $vp2
@include breakpoint($vp2) {
  background: orange;
}

// min-width at $vp1, max-width at $vp2
@include breakpoint($vp1, $vp2) {
  background: red;
}

// max-width at $vp2
@include breakpoint(max, $vp2) {
  background: violet;
}