Simple, elegant and maintainable media queries in Sass

include-media is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.

I spent quite some time experimenting with different libraries and mixins available out there, but eventually all of them failed to do everything I needed in an elegant way. Some of them wouldn't let me mix set breakpoints with case-specific values, others wouldn't properly handle the CSS OR operator and most of them had a syntax that I found complicated and unnatural.

include-media was the result of that experience and it includes all the features I wish I had found before, whilst maintaining a simplistic and natural syntax.

• With Bower: bower install include-media
• With npm : npm install include-media
• Manually: get this file

Finally, include the file in your project using an @import statement.

Examples can be found here.

• include-media-export - Reference include-media breakpoints in JavaScript.
• include-media-columns - Generate column classes using the BEMIT naming convention, automatically referencing include-media breakpoints.
• include-media-spread - Calculates the difference between property values and distributes them through your include-media breakpoints.
• flex_e_ble - Uses your include-media breakpoints to create your own flexible class naming structure on top of a flex based grid with inline-block fallback for >= ie8 compatibility

• include-media.com
• Documentation
• Approaches to Media Queries in Sass (CSS-Tricks)
• Write Simple, Elegant and Maintainable Media Queries with Sass (David Walsh blog)
• Generating Alternative Stylesheets for Browsers Without @media (David Walsh blog)
• Create Simple Inline Media Queries with include-media (WebDevStudios)
• Breakpoints and Tweakpoints in Sass (SitePoint)

We are Eduardo Bouças and Hugo Giraudel.

We'll be on the lookout for your issues and pull requests — but make sure you read this before submitting any code!

This project is licensed under the terms of the MIT license.