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 $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.