SASS breakpoint highlighter
A useful visual reference of your breakpoints when debugging, developing and designing around breakpoints
When we’re developing and designing with breakpoints it can been hard to tell what breakpoint we’re on. This can be frustrating particularly when we’re trying to work out when things should snap, or why they’re not snapping. We could always use the Inspector and remember what our breakpoint values are, but sometimes it’s nicer just to have a visual reference. I’ve used this a couple of times without the if statement so I’ve tried to make it a bit more utility friendly and wrapped it in a conditional, that way the ‘debug’ code could be extended. Hopefully you’ll find it handy.
I plonk my $debug boolean variable in to my variable.scss.