@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: 960px) {
      @content;
    }
  } @else if $class == lg {
    @media (min-width: 1300px) {
      @content;
    }
  } @else {
    @warn "Breakpoint mixin supports: xs, sm, md, lg";
  }
}

@mixin breakpointClass($class) {
  @if $class == xs {
    &.xs,
    &.xxs {
      @content;
    }
  } @else if $class == sm {
    &.sm,
    &.md,
    &.lg {
      @content;
    }
  } @else if $class == md {
    &.md,
    &.lg {
      @content;
    }
  } @else if $class == lg {
    &.lg {
      @content;
    }
  } @else {
    @warn "Breakpoint Class mixin supports: xs, sm, md, lg";
  }
}