Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // 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;
Add Comment
Please, Sign In to add comment