Manage Your Breakpoints Better Using Sass Mixins

Managing breakpoints can be a hassle. If you need to set up different CSS styles or layouts for different browser sizes, your code can get repetitive pretty quickly. Furthermore, you’re left using these breakpoint values at multiple points in your code. Thankfully, Sass has solutions for us to help DRY out your CSS and make managing breakpoints a bit more painless: Sass mixins.

Mixins

Sass mixins are extremely powerful and can help us cut down on repeated CSS blocks of code. If you haven’t used them before the syntax looks like this:
 

@mixin red-on-black {
     color: red;
     background-color: black;
}

And anywhere where you want to use this mixin, you can call it like so:

.my-div {
     @include red-on-black
}

I like to think of it almost like a copy-and-paste. Each line of CSS added into the @mixin block is copied and pasted into wherever you call @include.

Breakpoints

To effectively use Sass with breakpoints, we need to use the @content tag with the mixin, which lets us specify dynamic content when we call @include. Find more information about the @content tag here

First, let’s define our breakpoint pixel values as variables.

breakpoints.module.scss

$xsBreakpoint: 576px;
$smBreakpoint: 768px;
$mdBreakpoint: 1024px;
$lgBreakpoint: 1290px;
$xlBreakpoint: 1440px;

Next, let’s define a mixin for each breakpoint value. We’ll use the @content tag here in order to input which lines of CSS we need to use for that breakpoint.

breakpoints.module.scss

@mixin xs-breakpoint {
     @media only screen and (max-width: $xsBreakpoint){
          @content
     }
}

@mixin sm-breakpoint {
     @media only screen and (min-width: $smBreakpoint){
          @content
     }
}

@mixin md-breakpoint {
     @media only screen and (min-width: $mdBreakpoint){
          @content
     }
}

@mixin lg-breakpoint {
     @media only screen and (min-width: $lgBreakpoint){
          @content
     }
}

@mixin xl-breakpoint {
     @media only screen and (min-width: $xlBreakpoint){
          @content
     }
}

And then, wherever we need to utilize a style for a specific breakpoint, we can simply import our breakpoints.module.scss file and use the @include tag to specify which styles we want to include.

For example, in a modal:

@import './breakpoints.module.scss';
.modal {
width: 500px;

@include lg-breakpoint {
     width: 1000px;
}

@include xl-breakpoint {
     width: 1250px;
}

Managing Your Breakpoints with Sass Mixins

And that’s it! You can use these mixins at any place in your CSS in order to quickly declare specific breakpoint styles. And, you can do it without getting repetitive or relying on magic pixel values spread throughout your codebase. If you need to change your breakpoint values at any point, you can change the pixel value in one place, and the changes are updated and reflected throughout your codebase. 

For more info on Sass mixins, check out the documentation here.