📱 Responsive Mixin

Introduction

A short article to demonstrate a nice way to add responsive styles throughout your application without having to write media queries everywhere.

Mixins help clean up your stylesheets and encourage reusability when crafting your application styles. If you want to learn more about sass mixins make sure to check out my previous article: Sass Mixins.

Managing Media Queries

The responsive breakpoint values defined below with Sass variables are interchangeable and may need to be tweaked to support your application designs across your various supported screen sizes. You may wish to define mobile, tablet, and desktop variables, but these values and naming conventions work best for me.

SCSS
1/*_variables.scss */
2
3$mobile-min-width: 0px;
4$mobile-mid-width: 500px;
5$mobile-max-width: 767px;
6$desktop-min-width: 1440px;

Here is a quick visual showing how these breakpoints map out across different screen widths.

Now that we've added our breakpoint values, we can create our re-usable responsive mixin to centralise our media queries.

SCSS
1/* mixins.scss */
2@import './variables'; // yes... I still need to swap over to @use
3
4@mixin responsive($type) {
5    @if $type==mobileMin {
6      @media screen and (max-width: $mobile-min-width) {
7        @content;
8      }
9    }
10  
11    @if $type==mobileMinMid {
12      @media screen and (min-width: $mobile-min-width) and (max-width: $mobile-mid-width) {
13        @content;
14      }
15    }
16  
17    @if $type==mobileMinMax {
18      @media screen and (min-width: $mobile-min-width) and (max-width: $mobile-max-width) {
19        @content;
20      }
21    }
22  
23    @if $type==mobileMax {
24      @media screen and (max-width: $mobile-max-width) {
25        @content;
26      }
27    }
28  
29    @if $type==desktopMin {
30      @media screen and (min-width: $desktop-min-width) {
31        @content;
32      }
33    }
34  }

To use our new responsive mixin, we need to use the @include directive and pass the styles into the body of our sass function. It almost feels like we are working with React children inside our responsive mixin with the @content directive. The @content directive allows us to pass a content block of styles into a mixin.

SCSS
1/* selectors.scss */
2@import './mixins.scss'; // yes... I still need to swap over to @use
3
4.profile-picture {
5  $HW: 100px;
6  $HW-Mobile: 70px;
7
8  @include responsive(mobileMinMax) {
9    max-height: $HW-Mobile;
10    max-width: $HW-Mobile;
11  }
12
13  max-height: $HW;
14  max-width: $HW;
15
16  border: 3px solid white;
17  border-radius: 50%;
18}

Final Thoughts

I really love using sass mixins to create re-usable styles that cut down on duplication throughout my stylesheets. With this setup, it's easy to update all responsive breakpoints in a single location.