Breakpoint makes writing media queries in Sass super simple.
I told you it was simple. Check it out. You can use that variable in the Breakpoint mixin like this.
That just did two things that are really helpful. First, we reduced the media query down to the one value that really matters here, the min-width value. (You can also build complex queries and override the defaults. We’ll get to those.) And second, we gave that media query a meaningful name. And once we start calling media queries by name we can start managing them systematically. Whoa.
$high-tide uses the defaults. Pass Breakpoint just a number and it assumes you want it to write a min-width query.
$ex-presidents is made up of two numbers. When Breakpoint sees that it will turn that into a min-width/max-width query.
$surfboard-width is made up of a number and the name of a feature to test. Breakpoint will turn these into feature/value pairs
$surfboard-height has a feature/value pair, and adds a second non-numeric pair. Breakpoint can interpret text-based tests and can string together as many queries as you need.
That’s the basics, but wait there’s more.
Breakpoint also builds in robust support for no query fallbacks, the ability to pass the media query context to your own custom mixins, and special handling for device-pixel-ratio.
With contributions from
Licensed under GPL2/MIT: GPL2 license MIT license