Sass Media Queries Structure - Bootstrap Base: http://sassmeister.com/gist/52e69977e3278a4d409a

SassMeister-input.scss

//
// Functions
//

// RANGES
// We use these functions to define ranges for various things, like media queries. 
@function lower-bound($range){
  @if length($range) <= 0 {
    @return 0;
  }
  @return nth($range,1);
}

@function upper-bound($range) {
  @if length($range) < 2 {
    @return 999999999999;
  }
  @return nth($range, 2);
}

//
// Settings
//

// Extra small screen / phone
//** Deprecated `$screen-xs` as of v3.0.1
$screen-xs:                  480px !default;
//** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xs-min:              $screen-xs !default;
//** Deprecated `$screen-phone` as of v3.0.1
$screen-phone:               $screen-xs-min !default;

// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet:              $screen-sm-min !default;

// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop:             $screen-md-min !default;

// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
$screen-lg:                  1200px !default;
$screen-lg-min:              $screen-lg !default;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop:          $screen-lg-min !default;

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

// Media Query Ranges
 $screen-xs-range: ($screen-xs-min, $screen-xs-max);
 $screen-sm-range: ($screen-sm-min, $screen-sm-max);
 $screen-md-range: ($screen-md-min, $screen-md-max);
 $screen-lg-range: ($screen-lg-min, 999999999px);
 
 // Media Query Expressions
 $screen: "only screen";

 $landscape: "#{$screen} and (orientation: landscape)";
 $portrait: "#{$screen} and (orientation: portrait)";

 $screen-xs-up: $screen;
 $screen-xs-only: "#{$screen} and (max-width: #{upper-bound($screen-xs-range)})";

 $screen-sm-up: "#{$screen} and (min-width:#{lower-bound($screen-sm-range)})";
 $screen-sm-only: "#{$screen} and (min-width:#{lower-bound($screen-sm-range)}) and (max-width:#{upper-bound($screen-sm-range)})";

 $screen-md-up: "#{$screen} and (min-width:#{lower-bound($screen-md-range)})";
 $screen-md-only: "#{$screen} and (min-width:#{lower-bound($screen-md-range)}) and (max-width:#{upper-bound($screen-md-range)})";

 $screen-lg-up: "#{$screen} and (min-width:#{lower-bound($screen-lg-range)})";
 $screen-lg-only: $screen-lg-up;

//
// Mixin
//

@mixin breakpoint($point) {
  @if $point == xs {
      @media #{$screen-xs-only} { @content; }
  }
  @else if $point == xs-up {
      @content;
  }
  @else if $point == sm {
      @media #{$screen-sm-only} { @content; }
  }
  @else if $point == sm-up {
      @media #{$screen-sm-up} { @content; }
  }
  @else if $point == md {
      @media #{$screen-md-only} { @content; }
  }
  @else if $point == md-up {
      @media #{$screen-md-up} { @content; }
  }
  @else if $point == lg {
      @media #{$screen-lg-only} { @content; }
  }
  @else if $point == lg-up {
      @media #{$screen-lg-up} { @content; }
  }
  @else {
      @warn "This breakpoint '#{$point}' doesn't exist!";
  }
}


//
// Styles
//

#nav {
  background: #eee;
  @include breakpoint(xs-up) {
      li {
          display: block;
          margin-right: 0;
      }
  }
  @include breakpoint(sm-up) {
      ul {
          float: left;
          width: 80%;
      }
      li {
          display: inline-block;
          margin-right: 1rem;
      }
  }
  @include breakpoint(sm) {
      ul {
          float: left;
          width: 80%;
      }
      li {
          display: inline-block;
          margin-right: 1rem;
      }
  }
  @include breakpoint(md) {
      h1 {
        font-size: 50px;
      }
  }
  @include breakpoint(lg-up) {
      h1 {
        font-size: 50px;
      }
  }
}

SassMeister-output.css

#nav {
  background: #eee;
}
#nav li {
  display: block;
  margin-right: 0;
}
@media only screen and (min-width: 768px) {
  #nav ul {
    float: left;
    width: 80%;
  }
  #nav li {
    display: inline-block;
    margin-right: 1rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  #nav ul {
    float: left;
    width: 80%;
  }
  #nav li {
    display: inline-block;
    margin-right: 1rem;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #nav h1 {
    font-size: 50px;
  }
}
@media only screen and (min-width: 1200px) {
  #nav h1 {
    font-size: 50px;
  }
}