Simple, elegant and maintainable media queries in Sass
npm install include-media
include-media is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.
As of 2.0 include-media only supports dart-sass 1.25+
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 npm: npm install include-media
- With yarn: yarn add include-media
- With Bower: bower install include-media
- With Rails: gem 'include_media_rails' (maintained by KaoruDev)
- 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-grid - An include-media plugin for generating grid classes based on the flex display.
- im-to-em - A tiny function to convert include-media breakpoints from px to em.
- include-media-hidden-classes - An include-media plugin to generate classes for hiding elements.
- Fluid-Size: Use include-media breakepoints to provide the fit size for the device.
- https://eduardoboucas.github.io/include-media/
- 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)
- include-media-or - A fork of include-media with support for complex queries with logical disjunctions (maintained by Nirazul).
include-media was created by Eduardo Bouças and Kitty Giraudel. The lead maintainer is Jack McNicol.
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.