I’ve just converted my Sass code to use this, and I can safely say it’s pretty excellent.
include-media is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.
[…]
Why another library?
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.
I wrote an article on CSS-Tricks about this experience, where I explain in detail the problems I found with each of the solutions I experimented with. I also wrote on David Walsh’s blog about the implementation details of include-media.
Example usage:
Code language: Sass
$breakpoints: (small: 320px, medium: 768px, large: 1024px);
/* Inclusive and exclusive operators for a finer control over the intervals */
@include media(">medium", "<=large") {
width: 100%;
}