Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----


$view: "Current view";

// Other size
$sidebar-width: 280px;

/// # BREAKPOINTS
$bp-s: 640px;
$bp-m: 960px;
$bp-w: $bp-s * 2;

/// # CONTAINERS BREAKPOINTS
/// $bpc : breakpoint container
$bpc-s: $sidebar-width + 500;
$bpc-m: $sidebar-width + 620;
$bpc-w: $sidebar-width + 720;

$ON: true;
$view: "Current view";
$thumbColor: rebeccapurple;

$c-blueSleek: #415FD9;
$c-actionBlue: #4285f4;
$c-yellow: #FFC234;
$c-yellorange: #ffc234;
$c-green: #4BC57A;
$c-orange: #FB9071;
$c-red: #ff6868;
$c-lightblue: #59ADEB;
$c-dodgerBlue: #4285f4;
$c-darkGray: #343B45;

@mixin debugBreakpoint($bg, $color: #FFF, $posY: top, $posX: left) {
  position: absolute;
  z-index: 99999999;
  background: saturate(lighten($bg, 6%), 20%);
  display: inline-block;
  @extend .bs-3;
  border-radius: 3px;
  margin: 8px;
  @if $posY == top {
    top: 0;
  }
  @else {
    bottom: 0;
  }
  @if $posX == left {
    left: 0;
  }
  @else {
    right: 0;
  }
  @if $thumbColor == #fff or $thumbColor == #FFF or $thumbColor == #FFFFFF or $thumbColor == #ffffff {
    background: #000;
  }
  color: #fff;
  @if $thumbColor == #FFF or $bg == $c-yellow {
    color: #000;
  }
  @else {
    color: #{$color};
  }
}

@if $ON == true {
  html:before {
    font-weight: 400;
    padding: 0.5em 1em;
  }
  @media screen and (min-width: $bp-w) {
    html:before {
      content: "#{$view} : $bp-w";
      @include debugBreakpoint($c-blueSleek);
    }
  }
  @media screen and (max-width: $bp-w) {
    html:before {
      content: "#{$view} : $bpc-w";
      @include debugBreakpoint($c-yellow);
    }
  }
  @media screen and (max-width: $bpc-w) {
    html:before {
      content: "#{$view} : $bp-m";
      @include debugBreakpoint($c-green);
    }
  }
  @media screen and (max-width: $bp-m) {
    html:before {
      content: "#{$view} : $bpc-m";
      @include debugBreakpoint($c-orange);
    }
  }
  @media screen and (max-width: $bpc-m) {
    html:before {
      content: "#{$view} : $bpc-s";
      @include debugBreakpoint($c-red);
    }
  }
  @media screen and (max-width: $bpc-s) {
    html:before {
      content: "#{$view} : $bpc-s";
      @include debugBreakpoint($c-dodgerBlue);
    }
  }
  @media screen and (max-width: $bp-s) {
    html:before {
      content: "#{$view} : $bp-s";
      @include debugBreakpoint($c-darkGray);
    }
  }
}

SassMeister-output.css

html:before {
  font-weight: 400;
  padding: 0.5em 1em;
}

@media screen and (min-width: 1280px) {
  html:before {
    content: "Current view : $bp-w";
    position: absolute;
    z-index: 99999999;
    background: #4769f2;
    display: inline-block;
    border-radius: 3px;
    margin: 8px;
    top: 0;
    left: 0;
    color: #fff;
    color: #FFF;
  }
}

@media screen and (max-width: 1280px) {
  html:before {
    content: "Current view : $bpc-w";
    position: absolute;
    z-index: 99999999;
    background: #ffcb53;
    display: inline-block;
    border-radius: 3px;
    margin: 8px;
    top: 0;
    left: 0;
    color: #fff;
    color: #000;
  }
}

@media screen and (max-width: 1000px) {
  html:before {
    content: "Current view : $bp-m";
    position: absolute;
    z-index: 99999999;
    background: #4de186;
    display: inline-block;
    border-radius: 3px;
    margin: 8px;
    top: 0;
    left: 0;
    color: #fff;
    color: #FFF;
  }
}

@media screen and (max-width: 960px) {
  html:before {
    content: "Current view : $bpc-m";
    position: absolute;
    z-index: 99999999;
    background: #ffa68c;
    display: inline-block;
    border-radius: 3px;
    margin: 8px;
    top: 0;
    left: 0;
    color: #fff;
    color: #FFF;
  }
}

@media screen and (max-width: 900px) {
  html:before {
    content: "Current view : $bpc-s";
    position: absolute;
    z-index: 99999999;
    background: #ff8787;
    display: inline-block;
    border-radius: 3px;
    margin: 8px;
    top: 0;
    left: 0;
    color: #fff;
    color: #FFF;
  }
}

@media screen and (max-width: 780px) {
  html:before {
    content: "Current view : $bpc-s";
    position: absolute;
    z-index: 99999999;
    background: #5695ff;
    display: inline-block;
    border-radius: 3px;
    margin: 8px;
    top: 0;
    left: 0;
    color: #fff;
    color: #FFF;
  }
}

@media screen and (max-width: 640px) {
  html:before {
    content: "Current view : $bp-s";
    position: absolute;
    z-index: 99999999;
    background: #324766;
    display: inline-block;
    border-radius: 3px;
    margin: 8px;
    top: 0;
    left: 0;
    color: #fff;
    color: #FFF;
  }
}