Write breakpoints using mixin and scss

When we work on a website we obviously have to take into consideration the “mobile” versions of our web project

Assuming you know what CSS media queries are, let’s see how to use the SCSS features to create beautifully readable media queries that keep your code clean and legible, which can be quickly reused in our SCSS files, and that are easy to use.

Set the code

Here is the code to create the mixins that we will use in the files.

Understanding the code

If you’re wondering why I used @each, the answer is very simple: if I'd only written the if and else-if series, I couldn't have concatenated breakpoints.

Let’s say we want the background color of a div of a different color just for phone and tablet. If I hadn’t used @each, I would have had to write:

Using @each allows us to write this instead:

Moreover, if it happens a particular case where our breakpoints are not enough, we can customize the media queries by specifying pixels manually, thanks to @type-of(). For example:

Please note that I have set my media queries according to how I use them. Personally I find it very convenient to use max-width as a limit, so you can set the overall style and then choose on which devices it should be changed.
This also happens if you manually enter a number of px. That number will be taken as max-width.

You can, of course, change their behavior according to your habits.

Photo by Caspar Camille Rubin on Unsplash

Originally published at https://dannyspina.com on November 6, 2019.

I am nothing but an observer. Forever grateful to be born in the digital age. Italian based in Germany.