Sass-based Media Queries With Breakpoint

Share this article

This post is not going to be talking about any old Sass media query mixin. No. We are going to look at the @import (formerly Team Sass) Breakpoint Mixin. In May, Hugo Giraudel wrote a post comparing various ways of handling media queries with Sass. He mentions Breakpoint near the end of that article and today we’re going to take an in-depth look at managing responsive breakpoints with Sass using the Breakpoint plugin.

Why Use a Plugin?

If you’re like me, you might have started reading this article and thought, “I already have my own media query mixin, why use this one?” That is the exact same question I would have asked a few months ago. I’ve built my own mixin that I’m really comfortable with and I don’t see a need to switch. Even so, there are a few good reasons to look at and try another mixin.

First, we all have blindspots. While I may be completely happy with the code I wrote, I may be missing some great ways to improve it or overlooking a bug. Getting your hands dirty with someone else’s code is a great way to stretch your skills and improve your own code.

Second, it’s totally fine to depend on someone else’s code. There are no bonus points for being a ‘Lone Ranger’ programmer. Of course you need to evaluate the code and the reliability of its authors and maintainers, but having a useful plug-in that is maintained by a set of skilled volunteers is an incredible luxury.

Third, being familiar with multiple tools makes for a more versatile developer. This is especially true if you’re in a situation where you frequently “inherit” existing code. It ultimately doesn’t matter whether you love or hate new code that you try, trying it makes you more versatile and confident.

Basic Breakpoint

Installing Breakpoint

Breakpoint is a Compass extension so you’ll need to have Compass running before you can use it. Once that’s ready, you can find installation instructions on the Breakpoint website.

Setting Breakpoint Variables

To get started with Breakpoint you will need to set up a series of variables for your breakpoints. Breakpoint variables can be as simple as a measurement ($bp-large: 1200px), or as complex as a list of values ($bp-complex: (min-height 720px) (orientation landscape) (min-resolution: 300dpi);). Let’s look at the options for these variables.

One Measurement

If all you set in a variable is numeric, Breakpoint will default to a min-width media query.

$bp-one-measurement: 30em;
//output
@media (min-width: 30em) { ... }

Two Measurements

If your variable includes two measurements, Breakpoint will use the lower one as min-width and the higher as max-width:

$bp-two-measurements: 20em 40em;
//output
@media (min-width: 20em) and (max-width: 40em) { ... }

Feature and a Measurement

If your variable is a list with a string and a number, Breakpoint will use the string as a media query feature name and the number as its value.

$bp-feature-measurement: max-height 700px;
//output
@media (max-height: 700px) { ... }

Feature and a Value

You can probably see where we’re going with this one: you can put any media query feature-value pair into a variable and pass it to Breakpoint:

$bp-feature-value: orientation portrait;
//output
@media (orientation: portrait) { ... }

Multiple Feature Pairs

Let’s get crazy now. You can put together as many media query feature-value pairs as you’d like, just enclose each pair in parenthesis.

$bp-multiple-feature-pairs: (min-height 720px) (orientation landscape) (min-resolution: 300dpi);
//output
@media (min-height: 720px) and (orientation: landscape) and (min-width: min-resolution 300dpi) { ... }

Media Types

Remember media types? Screen, print, tv, projection, etc? Pass one of those labels into Breakpoint and it’ll be part of your output:

$bp-include-type: tv 30em;
//output
@media tv and (min-width: 30em) { ... }

Error Handling

Let’s say you put some bad stuff in a variable for Breakpoint. How much will it let you get away with? Breakpoint is pretty lenient: whatever you feed it, it returns. (GIGO, right?)

$bp-error: not-a-feature-or-value;
//output
@media (min-width: not-a-feature) { ... }

$bp-error: bogus pair;
//output
@media (pair: bogus) { ... }

$bp-error: (fake list) what;
//output
@media (list: fake) and (min-width: what) { ... }

What might surprise you here is that if you pass invalid strings as a feature-value pair, Breakpoint reverses their order. I’d expect $bp-error: bogus pair; to produce @media (bogus: pair) { ... }. This is because Breakpoint’s logic for handling a two-string pair only checks whether or not the first string is a valid media query value name. If it’s not, Breakpoint assumes it’s the value, doesn’t bother checking the second string, and assumes the second string is a valid feature name. While an @warn would be nice here, it’s basically a moot point since nothing is valid in this scenario anyway.

Calling the Media Queries

Now that you know what kind of craziness you can put into your media query variables for Breakpoint, let’s look at how to use it in your code. Of course the first thing to do is @import the Breakpoint library into your Sass. Once you’ve done that and set up your variables, you’re ready to use the breakpoint() mixin.

body {
  color: black;
  @include breakpoint($bp-one-measurement) {
    color: red;
  }
}
//output
body {
  color: black;
}
@media (min-width: 30em) {
  body {
    color: red;
  }
}

I recommend using the breakpoint() mixin inside whatever selector will be affected: Breakpoint will automatically re-create that selector inside the standard CSS @media (){} syntax. In my view, nesting the media query variations in relevant selector makes your Sass much easier to maintain.

However, if your project or organization requires separate media query partials, you can still use Breakpoint: just call the mixin and then put whatever selectors you want inside:

// _global.scss
body {
  color: black;

}
// _mq-30em.scss
@include breakpoint($bp-one-measurement) {
  body {
    color: red;
  }
}

//output = exactly the same
body {
  color: black;
}
@media (min-width: 30em) {
  body {
    color: red;
  }
}

Breakpoint – Beyond the Basics

Fallback for IE8

If you’re supporting IE8 or below, or other mq-less browsers (without using a JavaScript polyfill like respond.js), you can specify styles for that “fallback” state. (Personally, I’m happy serving IE8 a wider version of the single-column mobile-first styles, but you may need to serve those users a “full desktop” styled version of the site.) Breakpoint lets you do this with the $breakpoint-no-queries and $breakpoint-no-query-fallback variables.

$breakpoint-no-queries: false;
$breakpoint-no-query-fallbacks: true;
body {
  color: black;
  @include breakpoint(567px, $no-query: '.no-mqs') {
    color: red;
  }
}
//output
body {
  color: black;
}
@media (min-width: 567px) {
  body {
    color: red;
  }
}
.no-mqs body {
  color: red;
}

In this example we are using Modernizr’s .no-mqs body class to target browsers that don’t support media queries and giving them the “large” view of the site, without breaking a “mobile-first” cascade order.

If you need to print those fallback styles in a separate stylesheet, check out this part of the Breakpoint docs.

Media Query Context

Have you ever written a mixin that would output different styles depending on what breakpoint it was in? If so, Breakpoint gives you a helper function to find out: breakpoint-get-context($feature).

body {
  @include breakpoint($bp-multiple-feature-pairs) {
    orientation: breakpoint-get-context('orientation');
  }
}
//output
@media (min-height: 720px) and (orientation: landscape) and (min-width: min-resolution 300dpi) {
  body {
    orientation: landscape;
  }
}

Conclusion

Breakpoint is a powerful tool for managing media queries with Sass. In the interest of full disclosure, however, I don’t often use it. One reason: I put my breakpoints in a Sass map (and mostly just use min-width queries). However, for more complex projects (involving print, orientation, or resolution queries, for example), Breakpoint covers so much more than my simple min-width mixin and you can find out more from the Breakpoint github repo wiki.

You can play with the code behind these samples here on SassMeister.

Frequently Asked Questions about Sass-Based Media Queries with Breakpoint

What is the main advantage of using Sass-based media queries with Breakpoint?

The main advantage of using Sass-based media queries with Breakpoint is the ability to write cleaner and more maintainable code. Breakpoint simplifies the process of writing media queries in Sass, allowing you to define breakpoints in one place and use them throughout your code. This reduces the chances of errors and inconsistencies, making your code easier to read and maintain.

How do I install and use Breakpoint in my Sass project?

To install Breakpoint, you need to have Sass and Compass installed in your project. Once these are set up, you can install Breakpoint using the command gem install breakpoint. After installation, you can import Breakpoint into your Sass file using @import "breakpoint";. Now, you can start using Breakpoint for creating media queries.

Can I use Breakpoint with other CSS preprocessors like Less or Stylus?

No, Breakpoint is specifically designed to work with Sass. It leverages the features of Sass to provide a powerful and flexible way to manage media queries. If you’re using other CSS preprocessors like Less or Stylus, you’ll need to find similar tools or libraries designed for those preprocessors.

How can I create a media query using Breakpoint?

Creating a media query with Breakpoint is straightforward. You can define a breakpoint using the breakpoint mixin. For example, @include breakpoint(500px) { ... } will create a media query that applies styles when the viewport is 500px or wider.

Can I use Breakpoint to create complex media queries with multiple conditions?

Yes, Breakpoint allows you to create complex media queries with multiple conditions. You can combine multiple breakpoints using the and keyword. For example, @include breakpoint(500px and portrait) { ... } will apply styles when the viewport is 500px or wider and in portrait orientation.

How can I manage multiple breakpoints in a large project?

Breakpoint provides a feature to define named breakpoints. You can define all your breakpoints in one place and refer to them by name throughout your code. This makes it easier to manage multiple breakpoints in a large project.

Can I use Breakpoint with CSS Grid or Flexbox?

Yes, you can use Breakpoint with any CSS layout method, including CSS Grid and Flexbox. Breakpoint simply generates media queries, which can be used to apply different styles at different viewport sizes, regardless of the layout method you’re using.

How does Breakpoint handle pixel density in media queries?

Breakpoint provides a feature to handle pixel density in media queries. You can specify the pixel density as a part of the breakpoint, and Breakpoint will generate the appropriate media query. This is useful for creating responsive designs that look sharp on high-resolution screens.

Can I use Breakpoint in a Sass partial?

Yes, you can use Breakpoint in a Sass partial. Just make sure to import Breakpoint in the partial where you want to use it. Remember that the order of imports matters in Sass, so you should import Breakpoint before you use it.

What should I do if I encounter an error while using Breakpoint?

If you encounter an error while using Breakpoint, the first step is to check the error message. The error message will usually give you a clue about what’s wrong. If you can’t figure out the problem, you can search for the error message online or ask for help in a community like Stack Overflow.

James SteinbachJames Steinbach
View Author

James is a Senior Front-End Developer with almost 10 years total experience in freelance, contract, and agency work. He has spoken at conferences, including local WordPress meet-ups and the online WP Summit. James's favorite parts of web development include creating meaningful animations, presenting unique responsive design solutions, and pushing Sass’s limits to write powerful modular CSS. You can find out more about James at jamessteinbach.com.

compasscompass extensionsCompass pluginssassSass Media Queriessass mixinsStuR
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week