Prompted by Dan Davies, I thought I’d share how I use nested media queries in Sass. What I do is nothing new, but we all learn by sharing and discussing things.
Below is how I use nested media queries in Sass. I try to keep nesting up to 3 levels deep at most, group properties by type such as layout (display, padding), text (colour, font, weight, size) and so on.
Then I order media queries by size, so the smallest query first then the largest last. Inside the query’s block, I try to keep the order of properties the same, but as they’re usually quite small, I’m not precious about it.
The only downside I can see to this is the end result when compiled. You could have many repeated
@media query declarations. When someone makes a good Sass plugin to combine the
@media declarations, that’d be awesome.
The very same Stuart as above shared some links related to my ‘many queries’ concern above. Take a look.