Copy-paste breakpoints.scss from an enterprise project

_breakpoints.scss

// Breakpoints
$breakpoint-1: 320px;
$breakpoint-2: 601px;
$breakpoint-3: 801px;  // Desktop min-width. Stuff starts to look like it's in the PSDs
$breakpoint-4: 1000px;  // Typical desktop min-width
$breakpoint-5: 1201px;  // Maximum width. Nothing should be happening beyond this point
$breakpoint-1-max-width: 460px;
$breakpoint-2-max-width: 580px;
$breakpoint-3-max-width: 999px;
$breakpoint-4-max-width: 1200px;

// Helpers:
$breakpoint-tablet: $breakpoint-2;
$breakpoint-desktop: $breakpoint-3;
$breakpoint-big-desktop: $breakpoint-4;


// Supported breakpoints:
// - big-desktop (1000->)
// - small-desktop (801-999)
// - desktop (801->)
// - tablet (601-800)
// - small-desktop-or-smaller (<-999)
// - tablet-or-smaller (<-800)
// - mobile-or-smaller (<-600)
@mixin breakpoint($point) {
    .be-responsive & {  // some (legacy) pages can't be responsive
        @if $point == big-desktop {
            @media (min-width: $breakpoint-big-desktop) { @content; }
        }
        @else if $point == small-desktop {
            @media (min-width: $breakpoint-desktop) and (max-width: $breakpoint-big-desktop - 1) { @content; }
        }
        @else if $point == desktop {
            @media (min-width: $breakpoint-desktop) { @content; }
        }
        @else if $point == tablet {
            @media (min-width: $breakpoint-tablet) and (max-width: $breakpoint-desktop - 1) { @content; }
        }
        @else if $point == mobile-or-smaller {
            @media (max-width: $breakpoint-tablet - 1)  { @content; }
        }
        @else if $point == tablet-or-smaller {
            @media (max-width: $breakpoint-desktop - 1)  { @content; }
        }
        @else if $point == small-desktop-or-smaller {
            @media (max-width: $breakpoint-big-desktop - 1)  { @content; }
        }
        @else {
            @media (#{$point}) { @content; }
        }
    }
}