breakpoints.scss

// Break Point

/***
* How to use
* @include bp(sp) {...}, @include bp(tab) {...}, @include bp(pc) {...}, 
* @include bp($sp, $md) {...}, @include bp($md, $lg) {...}, @include bp(500px, 768px) {...}, 
* @include bp(up, $sm)  {...}, @include bp(down, $md)  {...}, @include bp(up, 768px)  {...}, 
***/

@mixin bp($dir,$val: null) {
  @if $dir == sp {
    @media (max-width: $md - 1px){
      @content;
    }
  }
  @else if $dir == tab {
      @media (min-width: $md) and (max-width: $lg - 1px){
        @content;
    }
  }
  @else if $dir == pc {
      @media (min-width: $lg) {
        @content;
    }
  }
  @else if type-of($dir) == string {   
    @if $dir == up {
      @media (min-width: $val) {
        @content;
      }
    }
    @else {
      @media (max-width: $val - 1px) {
        @content;
      }
    }
  }
  @else if type-of($dir) == number {
    $one: $dir;
    $two: $val;
    @if $one > $two {
      $tmp: $two;
      $two: $one;
      $one: $two;
    }
    @media (max-width: $one -1px) and (min-width: $two) {
      @content;
    }
  }
}

variables.scss

// Material Color https://material.io/resources/color/
$red: #f44336;
$purple: #673ab7;
$indigo: #3f51b5;
$teal: #009688;
$green: #4caf50;

// Break point
$sm: 576px;
$md: 768px;
$lg: 992px;