Breakpoint rainbows for Bootstrap (v4-alpha5) for glaringly obvious breakpoint debugging/development

breakpoint-rainbow-box.scss

// puts a little box in the bottom right instead of changing the body bg color

body:after {
  content: 'xlg';
  position: fixed;
  z-index: 99999;
  bottom: 0;
  right: 0;
  padding: 2px 5px;
  border: 1px solid;
  border-width: 1px 0 0 1px;
  font-size: 10px;
  color: #000;
  text-transform: uppercase;


  @include media-breakpoint-down(lg) {
    content: 'lg';
    background: red;
  }
  @include media-breakpoint-down(md) {
    content: 'md';
    background: orange;
  }
  @include media-breakpoint-down(sm) {
    content: 'sm';
    background: yellow;
  }
  @include media-breakpoint-down(xs) {
    content: 'xs';
    background: green;
  }
}

breakpoint-rainbows.scss

body {
	
  @include media-breakpoint-down(lg) {
    background: red;
  }
  @include media-breakpoint-down(md) {
    background: orange;
  }
  @include media-breakpoint-down(sm) {
    background: yellow;
  }
  @include media-breakpoint-down(xs) {
    background: green;
  }
}