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.
I recommend you place the
$bp7 variables in a dedicated
_vars.scss file for easy access.
Will this work for every type of breakpoint?
No. If you define overlapping
max-width breakpoints then it might break. Haven't tested that. It's designed to be mobile-first and therefore only