A simple way to help identify which breakpoint you're in when using $variables as media query values.

_debug-breakpoint.scss

$debug-breakpoint: true;

$bp1: 'min-width: 20em'; // 320px
$bp2: 'min-width: 30em'; // 480px
$bp3: 'min-width: 37.5em'; // 600px
$bp4: 'min-width: 48em'; // 768px
$bp5: 'min-width: 56.25em'; // 900px
$bp6: 'min-width: 68.75em'; // 1100px
$bp7: 'min-width: 81.25em'; // 1300px

@if ($debug-breakpoint == true) {
  body:before {
    content: 'Initial';
    position: fixed;
    text-align: center;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.85);
    color: #FFF;
    font-weight: bold;
    z-index: 999;
    padding: 1em 2em;

    @media( $bp1 ) {
      content: 'Breakpoint 1'
    }
    @media( $bp2 ) {
      content: 'Breakpoint 2'
    }
    @media( $bp3 ) {
      content: 'Breakpoint 3'
    }
    @media( $bp4 ) {
      content: 'Breakpoint 4'
    }
    @media( $bp5 ) {
      content: 'Breakpoint 5'
    }
    @media( $bp6 ) {
      content: 'Breakpoint 6'
    }
    @media( $bp7 ) {
      content: 'Breakpoint 7'
    }
  }
}