Media query breakpoint mixin based on bootstrap 3 variables

_breakpoint.scss

// breakpoints
@mixin breakpoint($point) {
  //
  // large
  //
  @if $point == large-only {
    @media (min-width: $screen-lg-min) and (max-width: $screen-lg-min + 1) { @content; }
  }

  @else if $point == large-up {
    @media (min-width: $screen-lg-min) { @content; }
  }

  @else if $point == large-down {
    @media (max-width: $screen-lg-min - 1) { @content; }
  }
  //
  // medium
  //
  @else if $point == medium-only {
    @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { @content; }
  }

  @else if $point == medium-up {
    @media (min-width: $screen-md-min) { @content; }
  }

  @else if $point == medium-down {
    @media (max-width: $screen-md-max) { @content; }
  }
  //
  // small
  //
  @else if $point == small-only {
    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { @content; }
  }

  @else if $point == small-up {
    @media (min-width: $screen-sm-min) { @content; }
  }

  @else if $point == small-down {
    @media (max-width: $screen-sm-max) { @content; }
  }
  //
  // extra small
  //
  @else if $point == xsmall-down {
    @media (max-width: $screen-xs-max) { @content; }
  }

  @else {
    @debug "The param #{$point} is not defined in breakpoint().";
  }

}

_breakpoint_debug.scss

body {
  &:before {
    border-radius: 3px 0 0 0;
    bottom: 0;
    color: $gray-light;
    display: block;
    font-size: .8em;
    padding: 0 5px;
    position: fixed;
    text-shadow: 0 0 1px white, 0 0 1px white;
    right: 0;
    z-index: 9999;
  }
}
@include breakpoint(large-up) {
  .debug body:before {
    content: 'large-up';
    background-color: rgba($brand-primary, .5);
  }
}
@include breakpoint(medium-only) {
  .debug body:before {
    content: 'medium-only';
    background-color: rgba($brand-warning, .5);
  }
}
@include breakpoint(small-only) {
  .debug body:before {
    content: 'small-only';
    background-color: rgba($brand-info, .5);
  }
}
@include breakpoint(xsmall-down) {
  .debug body:before {
    content: 'xsmall-down';
    background-color: rgba($brand-success, .5);
  }
}