Sass Media Query mixin — Spring Cleaning

Connor Holyday
Jan 4, 2017 · 2 min read

As I’m sure you can relate, over time you seem to collect snippets of code that are supposed to make your life easier. Every now and then however a new feature might ship (come on CSS Grids!) or some browser support is no longer relevant. As such some of these snippets deserve to be dusted off and given a fresh coat of paint.

One that I use all the time is the Media Query mixin for Sass by the ever so talented Mr Stuart Robson 🔥

Data from Can I Use

Recently our needs have changed, and we no longer need to support browsers that in-turn don’t support media queries. This means we can drop the “less than IE9” section of the mixin.

@mixin mq($value, $feature: 'min-width') {

The arguments have also been renamed: the first argument is now simply $value as it could relate to a numerical value, or something else like a device orientation. The second argument is now called $feature and it has a default value of ‘min-width’ because we like to build from the feet up (mobile first). This value can easily be overwritten to ‘max-width’ or even something like ‘orientation’.

@if map-has-key($breakpoints, $value) {
$value: map-get($breakpoints, $value);
}

The first section of the mixin involves a check against our global breakpoints map, we use this to keep a standard set of breakpoints. For the fine-tuning of components we can instead pass in a numerical value.

@if type-of($value) == 'number' {
$value: $value + px;
}

The second section is a check to see if the supplied value is a number; if this is true then it uses a default pixel unit. In any instance that we’d like to use something other than pixels we can supply that unit with the value itself — thereby failing this condition.

// $value: can be a number, 'landscape', or a breakpoint letter
// $feature: default is min-width,
// can be overwritten with 'max-width', or 'orientation' etc.
@mixin mq($value, $feature: 'min-width') { @if map-has-key($breakpoints, $value) {
$value: map-get($breakpoints, $value);
}
@if type-of($value) == 'number' {
$value: $value + px;
}
@media screen and (#{$feature}: $value) {
@content;
}
}

And there you have it!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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