Mixin for responsive breakpoints

responsive-mq.scss

@mixin breakpoint($class) {
  @if $class == xs {
    @media (max-width: 767px) { @content; }
  }
 
  @else if $class == sm {
    @media (min-width: 768px) { @content; }
  }
 
  @else if $class == md {
    @media (min-width: 992px) { @content; }
  }
 
  @else if $min == lg {
    @media (min-width: 1200px) { @content; }
  }
 
  @else {
    @warn "Breakpoint mixin supports: xs, sm, md, lg";
  }
}

@mixin breakpoint($min: 0, $max: 0) {
  $type: type-of($min);
 
  @if $type == string {
    @include breakpoint($class);
  }

  @else if $type == number {
    $query: "all" !default;
    @if $min != 0 and $max != 0 { 
      $query: "(min-width: #{$min}) and (max-width: #{$max})"; 
    }
    @else if $min != 0 and $max == 0 { 
      $query: "(min-width: #{$min})"; 
    }
    @else if $min == 0 and $max != 0 { 
      $query: "(max-width: #{$max})"; 
    }
    @media #{$query} { 
      @content;
    }
  }
}

aside.primary {
  @include breakpoint(md) {
    float: right;
    width: 350px;
  }
  @include breakpoint(480px) {
    display: none;
  }
  @include breakpoint($min: 640px, $max: 767px) {
    text-align: center;
    font-style: italic;
  }
}