#helpers

Breakpoint_Setup.md

mixins.scss

  $breakpoints: (
  'xs' : ( min-width:  $break-xs  ),
  'sm' : ( min-width:  $break-sm  ),
  'md' : ( min-width:  $break-md  ),
  'lg' : ( min-width:  $break-lg  ),
  'xl' : ( min-width:  $break-xl  ),
  'xxl': ( min-width:  $break-xxl )
  );

  @mixin breakpoint($name) {
    @media #{inspect(map-get($breakpoints, $name))} {
      @content;
    }
  }

variables.scss

  $break-xs:           350px  !default;
  $break-sm:           580px  !default;
  $break-md:           768px  !default;
  $break-lg:           1024px !default;
  $break-xl:           1280px !default;
  $break-xxl:          1440px !default;