Mobile-First Media Queries

_media-queries.scss

// HOW TO USE BREAKPOINT VARIABLES
// `@media #{$desktop} {
//    CSS: GOES HERE;
//  }`

// Breakpoints (we use pixels so we can still have mobile-last queries)
$tiny-phone-bp: 320px;
$phone-bp: 780px;
$tablet-bp: 900px;
$desktop-bp: 1200px;
$big-desktop-bp: 1800px;

// Mobile-first variables
$tiny-phone-over: '(min-width: #{$tiny-phone-bp + 1})'; // No phone should be smaller than 320px, so yeah...
$phone-over: '(min-width: #{$phone-bp})';
$tablet-over: '(min-width: #{$tablet-bp})';
$desktop-over: '(min-width: #{$desktop-bp})';
$big-desktop-over: '(min-width: #{$big-desktop-bp})';

// Mobile-last variables (subtract a pixel so breakpoints match up)
$phone-under: '(max-width: #{$tiny-phone-bp})';
$tablet-under: '(max-width: #{$phone-bp - 1})';
$desktop-under: '(max-width: #{$tablet-bp - 1})';
$big-desktop-under: '(max-width: #{$desktop-bp - 1})';
$big-desktop-under: '(max-width: #{$big-desktop-bp - 1})';

// Tiny phone media queries
$tiny-phone: 'only screen and #{$phone-under}';
$tiny-phone-only: $tiny-phone; // alias
$over-tiny-phone: 'only screen and #{$tiny-phone-over}';
$not-tiny-phone: $over-tiny-phone; // alias

// Phone media queries (Tiny phone include in phone besides under)
$under-phone: $tiny-phone-only; // alias
$phone: 'only screen and #{$tablet-under}';
$phone-only: $phone; // alias
$over-phone: 'only screen and #{$phone-over}';
$not-phone: $over-phone; // alias

// Portrait tablet media queries
$under-tablet: $phone-only; // alias
$tablet: 'only screen and #{$phone-over}';
$tablet-only: '#{$tablet} and #{$desktop-under}';
$over-tablet: 'only screen and #{$tablet-over}';
$not-tablet: '#{$under-tablet}, #{$over-tablet}';

// Landscape tablet (and small laptop) media queries
$under-desktop: 'only screen and #{$desktop-under}';
$desktop: $over-tablet; // alias
$desktop-only: '#{$desktop} and #{$big-desktop-under}';
$over-desktop: 'only screen and #{$desktop-over}';
$not-desktop: '#{$under-desktop}, #{$over-desktop}';

// Desktop (and large laptop) media queries
$under-desktop: 'only screen and #{$big-desktop-under}';
$big-desktop: $over-desktop; // alias
$big-desktop-only: '#{$big-desktop} and #{$big-desktop-under}';
$over-desktop: 'only screen and #{$big-desktop-over}';
$not-desktop: '#{$under-desktop}, #{$over-desktop}';

// Big monitor media queries
$under-big-desktop: 'only screen and #{$big-desktop-under}';
$big-desktop: $over-desktop; // alias
$big-desktop-only: $big-desktop;
$not-big-desktop: $under-big-desktop;