Breakpoint

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.

Let’s add a few more.

// 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);

And look at each in turn.

1. $high-tide uses the defaults. Pass Breakpoint just a number and it assumes you want it to write a min-width query.

   scss css

   
      .reagan {
        @include breakpoint($high-tide) {
          content: 'High tide';
        }
      }
      

   
      @media (min-width: 500px) {
        .reagan {
          content: 'High tide';
        }
      }
      

2. $ex-presidents is made up of two numbers. When Breakpoint sees that it will turn that into a min-width/max-width query.

   scss css

   
    .nixon {
      @include breakpoint($ex-presidents) {
      content: 'Ex-Presidents';
      }
    }
    

   
    @media (min-width: 600px) and (max-width: 800px) {
      .nixon {
        content: 'Ex-Presidents';
      }
    }
    

3. $surfboard-width is made up of a number and the name of a feature to test. Breakpoint will turn these into feature/value pairs

   scss css

   
    .johnson {
      @include breakpoint($surfboard-width) {
        content: 'Surfboard Width';
      }
    }
    

   
    @media (max-width: 1000px) {
      .johnson {
        content: 'Surfboard Width';
      }
    }
    

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

   scss css

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