Easy Responsive Media Queries with Sass/SCSS

Responsive design is something I’ve had no idea how to approach on my own until recently. Usually I just let a framework handle it, until recently when I stumbled upon this super helpful Sass library called include-media. Include-media allows us to quickly and easily define and reference breakpoints, and in this article I’ll give an introduction to setting it up.

1. Add this file to your projects styles directory. I put mine in a folder simply titled “breakpoints”. You could run npm i include-media instead, but I try to avoid installing packages whenever I can.
2. Set up your custom breakpoints (if desired).There are already some defined for us at the top of the file, but I chose to add a few extra. Here’s what mine look like:

3. Use the breakpoints in your code by adding @include media() and passing the screen sizes you wish to target into the parentheses. Here’s what that looks like:

Make sure to also use quotes and pass in an operator. As an example, my last media query is basically saying “for screen widths less than or equal to 320px, calculate this font size”.

That’s about it for a super basic introduction. Make sure to check out the include-media github if you want to learn more or explore some of the available plugins.