1 min read
Use Sass to highlight which media query is active
Often on sites that have many breakpoints it becomes increasingly difficult to figure out exactly which breakpoint you’re targeting; especially when you use $variables for breakpoint values (which speeds up development when using something like Breakpoint).
Include the following _debug-breakpoint.scss file in your main Sass stylesheet and you can easily see which breakpoint you’re in.
| $debug-breakpoint: true; | |
| $bp1: 'min-width: 20em'; // 320px | |
| $bp2: 'min-width: 30em'; // 480px | |
| $bp3: 'min-width: 37.5em'; // 600px | |
| $bp4: 'min-width: 48em'; // 768px | |
| $bp5: 'min-width: 56.25em'; // 900px | |
| $bp6: 'min-width: 68.75em'; // 1100px | |
| $bp7: 'min-width: 81.25em'; // 1300px | |
| @if ($debug-breakpoint == true) { | |
| body:before { | |
| content: 'Initial'; | |
| position: fixed; | |
| text-align: center; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| background: rgba(0,0,0,0.85); | |
| color: #FFF; | |
| font-weight: bold; | |
| z-index: 999; | |
| padding: 1em 2em; | |
| @media( $bp1 ) { | |
| content: 'Breakpoint 1' | |
| } | |
| @media( $bp2 ) { | |
| content: 'Breakpoint 2' | |
| } | |
| @media( $bp3 ) { | |
| content: 'Breakpoint 3' | |
| } | |
| @media( $bp4 ) { | |
| content: 'Breakpoint 4' | |
| } | |
| @media( $bp5 ) { | |
| content: 'Breakpoint 5' | |
| } | |
| @media( $bp6 ) { | |
| content: 'Breakpoint 6' | |
| } | |
| @media( $bp7 ) { | |
| content: 'Breakpoint 7' | |
| } | |
| } | |
| } |
I recommend you place the $debug-breakpoint and $bp1 - $bp7 variables in a dedicated _vars.scss file for easy access.
Will this work for every type of breakpoint?
No. If you define overlapping min-width and max-width breakpoints then it might break. Haven’t tested that. It’s designed to be mobile-first and therefore only min-width values.