SASS breakpoint mixin

gistfile1.scss

// https://rimdev.io/making-media-query-mixins-with-sass/

// example
.class {
    @include breakpoint(1200px, max) {
        display: block;
    }
}

.class {
    @include breakpoint(500px, min) {
       @include breakpoint(1000px, max) {
            display: none;
        }
    }
}

// Media query mixin
@mixin breakpoint($breakpoint, $direction) {
  @if $direction == max {
    @media (max-width: $breakpoint) {
      @content;
    }
  } @else if $direction == min {      
    @media (min-width: $breakpoint) {
      @content;
    }
  } @else {
    @media ($direction: $breakpoint) {
      @content
    }
  }
}