Excerpt for SitePoint article “Sass Mixin and Media Merging” by Hugo Giraudel
If you are not very familiar with Sass, you might not be aware that Sass enhances media queries (actually the @media directive) to provide extra interesting features. One of which is called (or rather often referred to as) media merging.
Before explaining to you what media merging is, did you know that the CSS specifications on Media Queries actually allow media queries to be nested? Some browsers like Firefox, Chrome and Opera support it; some other like Safari and Internet Explorer currently do not.
Because the browser support is not ideal, Sass kicks in and merges nested media queries into a single media condition. For instance, consider this code:
@media (min-width: 42em) {
@media (max-width: 1337px) {
.foo {
color: red;
}
}
}
This will be compiled as:
@media (min-width: 42em) and (max-width: 1337px) {
.foo {
color: red;
}
}
Pretty handy, isn’t it? This is what is called media merging. When nested media queries are merged into a single statement.
What do we want? Media queries!
Now that I have done with the introduction, let me get to the point. The other day, I was playing with this idea. Basically, I wanted to build a very simply mixin that takes a map of queries as input, and merge them into a single condition in a @media directive as an output.