$high-tide: 500px;
Breakpoint makes writing media queries in Sass super simple.
Here's one:
$high-tide: 500px;
I told you it was simple. Check it out. You can use that variable in the Breakpoint mixin like this.
.johnny-utah {
@include breakpoint($high-tide) {
content: 'Whoa.';
}
}
@media (min-width: 500px) {
.johnny-utah {
content: 'Whoa.';
}
}
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.
// assume min-width (by default) if only a number
$high-tide: 500px;
// set min-width/max-width if both values are numbers
$ex-presidents: 600px 800px;
// if one value is a string, assume a feature/value pair
$surfboard-width: max-width 1000px;
// string tests together within parentheses, assume each item is a feature value pair
$surfboard-height: (min-height 1000px) (orientation portrait);
$high-tide
uses the defaults. Pass Breakpoint just a number and it assumes you want it to write a min-width query.
.reagan {
@include breakpoint($high-tide) {
content: 'High tide';
}
}
@media (min-width: 500px) {
.reagan {
content: 'High tide';
}
}
$ex-presidents
is made up of two numbers. When Breakpoint sees that it will turn that into a min-width/max-width query.
.nixon {
@include breakpoint($ex-presidents) {
content: 'Ex-Presidents';
}
}
@media (min-width: 600px) and (max-width: 800px) {
.nixon {
content: 'Ex-Presidents';
}
}
$surfboard-width
is made up of a number and the name of a feature to test. Breakpoint will turn these into feature/value pairs
.johnson {
@include breakpoint($surfboard-width) {
content: 'Surfboard Width';
}
}
@media (max-width: 1000px) {
.johnson {
content: 'Surfboard Width';
}
}
$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.
.carter {
@include breakpoint($surfboard-height) {
content: 'Surfboard Height, Portrait';
}
}
@media (min-height: 1000px) and (orientation: portrait) {
.carter {
content: 'Surfboard Height, Portrait';
}
}
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