Concise Sass Mixin for Media Queries

If you want, jump to the codepen for this article first.

Using sass for media queries is pretty popular — there’s plenty of libraries just for this. Sass is a lot more powerful (especially with dart-sass) than people who have been using Sass for a long time might realize, and we can write some really expressive mixins and functions these days.

End result first:

Code is meant to be read by developers first and foremost. Before I explain what the above snippet does — make a guess. Sass like this isn’t about saving characters for the code’s sake, it’s about writing code with clear intent.

For each argument to the at-each() mixin, it treats the first argument (if present) as a breakpoint and the second as a parameter to pass along to the mixin’s @content . That is, the above code compiles to

Using the mixin results in clearer code and no duplication (you only reference font-size in one place.) It lowers the difficulty in changing single CSS value per breakpoint down to only adding one more meaningful line.

Here’s the source.

  • First up, we’ll use the newer sass modules syntax and @use "sass:map"; . You could easily rewrite this to use the (deprecated) unnamespaced sass map functions instead.
  • Next, Sass supports arbitrary arguments via a spread-like operator. Since we’re going to loop over $map right away, it’s a great fit here.
  • We’re using map.has-key() and map.get() to look up breakpoints by key from our $breakpoints map. Note that, if there’s no match it’ll just use the first argument as the breakpoint, meaning something like @include at-each(400px purple, 500px gold) { will work exactly the way the developer might hope.
  • Next, while @content is certainly not a new feature, you might not know that it can take arguments. Arguments passed in get assigned to variables when you using the mixin by the using () syntax. @include at-each(...) using ($size) { assigns the first argument passed @content to $size .

Other examples of things you can write with this mixin:

Here’s a codepen to play around with:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kevin Hamer

Kevin Hamer

45 Followers

The Principal Engineer at Imarc, Erratic Author on Medium. Writing about web development and being a better web developer.