Great, just great!

It could definitely be done with the mixin. But a question for you: Should it? I see two hurdles to consider:

  1. The input syntax would be more complicated. You would be passing in a SASS list of property + map combinations.
  2. It still wouldn’t combine with other media queries that you manually write outside the mixin.

There is a concept in development called separation of concerns. In most cases, a mixin/function/method should do one thing and do it really well. This keeps it simple enough to develop, maintain and test confidently. Your function shouldn’t need to do everything “and the kitchen sink”.

You could also say the same thing about a lack of minification. “Your mixin is great but it doesn’t minify the CSS too!”. Again my answer would be “Yeah it could, but should it?”. That’s why we have minification tools in a build pipeline. It’s the best place for that type of operation/tool. It’s a tool that does one thing and does it well.

The best solution is to do this in your build step using any one of a bunch of different npm-based tools that can automatically merge your media queries for you. You are already minifying (hopefully). So you might as well merge media queries at this point too. This takes care of both #1 and #2 listed above.

Never be afraid to consider (and embrace!) 3rd party solutions (like these build tools) that already exist to solve problems. Yeah, I could write a bunch of code to combine media queries in my mixin. But there are already these other awesome tools that do this that are easy to integrate into my pipeline. Why waste that time when other developers (who are all probably smarter than me) have already gone down that path and perfected a solution?

I hope this helps you understand my approach to keeping the mixin simple. Thank you for the kudos and feedback!

Like what you read? Give Jake Wilson a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.