You are currently offline, so some features of this site may not work fully.

Your browser doesn’t support some of the latest CSS features used to build this site.

Read more about my usage of new CSS features.

A Gist of my Sass media query mixin. I keep forgetting to upload and share snippets of CSS/Sass with people who ask, so here it is!

Another little tip, as I keep on finding myself having to dig through code to get this snippet to share with others every now and then.

The mixin

Mixins like this are useful I think for yourself and larger teams of developers, to ensure that consistent media query break points are used and no random magic “fixes” and overrides for very specific break points are put in place.

Do away with specificity

Whilst I mention using specific break points, using relative units for break points is a subject I’ve written on before, so my rationale behind that idea is in my post Do away with specific media queries.


TL;DR

The Sass media query mixin I use.

Enjoy!