A simple responsive breakpoint mixin that takes both attribute names and custom widths. See https://medium.com/p/889927b37740/

breakpoint.scss

@mixin breakpoint($min: 0, $max: 0) {
  $type: type-of($min);
  
  @if $type == string {
    @if $min == xs { 
      @media (max-width: 767px) { @content; }       // Mobile Devices
    }
    
    @else if $min == sm {
      @media (min-width: 768px) { @content; }       // Tablet Devices
    }
    
    @else if $min == md {
      @media (min-width: 992px) { @content; }       // Desktops
    }
    
    @else if $min == lg {
      @media (min-width: 1200px) { @content; }      // Widescreen Desktops
    }
  
    // Otherwise pass a warning to the compiler as to the appropriate options
    @else {
      @warn "The breakpoint mixin supports the following attributes: xs, sm, md, lg";
    }
  }
  @else if $type == number {
    // Allow for custom parameters for min and max size
    $query: "all" !default;
    @if      $min != 0 and $max != 0 { $query: "(min-width: #{$min}) and (max-width: #{$max})"; } // set both min and max
    @else if $min != 0 and $max == 0 { $query: "(min-width: #{$min})"; } // set just min
    @else if $min == 0 and $max != 0 { $query: "(max-width: #{$max})"; } // set just max
    @media #{$query} { @content; }
  }
}

Great mixin ! Thx

Thank you, this is great.
One suggestion:
When using it with bootstrap 3 you could substitute the px values for min-width and max-width with the default bs variables.
So the first part of the mixin would read

  @if $class == xs {
    @media (max-width: ($screen-sm - 1)) { @content; }
  }

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

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

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

If you've liked using this breakpoint mixin you might like my recent revision here which I talk about in my blog post.