Debug Bootstrap 4 breakpoints with Sass

Use this block of sass code to add a tiny indicator in the bottom left corner of the browser that will show the current active breakpoint whenever the class "debug" is added to the body tag.

body {

  &.debug {

    &:before {
      position: fixed;
      bottom: 0;
      left: 0;
      color: white;
      z-index: 99;
      padding: 10px;

      @include media-breakpoint-down(xs) {
        content: 'to xs';
        background: yellow;
      } 
      @include media-breakpoint-between(xs, sm) {
        content: 'xs to sm';
        background: navy;
      } 
      @include media-breakpoint-between(sm, md) {
        content: 'sm to md';
        background: black;
      }
      @include media-breakpoint-between(md, lg) {
        content: 'md to lg';
        background: green;
      }
      @include media-breakpoint-up(lg) {
        content: 'from lg';
        background: red;
      }
    }
  }

}