Responsive breakpoint mixin patterns in SASS

Introduction

Responsive breakpoints help your website look good on all screen sizes. Mixins make it easy to reuse these breakpoints in your styles.

You want your website to adjust layout on phones, tablets, and desktops.

You need to change font sizes or colors depending on screen width.

You want to keep your CSS clean by reusing common media query code.

You are building a design system with consistent responsive rules.

You want to quickly add or update breakpoints in one place.

Syntax

SASS

@mixin breakpoint($point) {
  @if $point == small {
    @media (max-width: 599px) {
      @content;
    }
  } @else if $point == medium {
    @media (min-width: 600px) and (max-width: 1023px) {
      @content;
    }
  } @else if $point == large {
    @media (min-width: 1024px) {
      @content;
    }
  }
}

The @mixin defines reusable code blocks.

@content inserts the styles you write inside the mixin call.

Examples

This changes the background color on small screens only.

SASS

@include breakpoint(small) {
  body {
    background-color: lightblue;
  }
}

This sets paragraph font size for medium screens.

SASS

@include breakpoint(medium) {
  p {
    font-size: 1.2rem;
  }
}

This makes navigation a flex container on large screens.

SASS

@include breakpoint(large) {
  nav {
    display: flex;
  }
}

Sample Program

This example uses a mixin to change the background and text color of the page depending on the screen size. Small screens get a light blue background, medium screens a lighter blue, and large screens stay white.

SASS

@use 'sass:color';

@mixin breakpoint($point) {
  @if $point == small {
    @media (max-width: 599px) {
      @content;
    }
  } @else if $point == medium {
    @media (min-width: 600px) and (max-width: 1023px) {
      @content;
    }
  } @else if $point == large {
    @media (min-width: 1024px) {
      @content;
    }
  }
}

body {
  background-color: white;
  color: black;
  font-family: Arial, sans-serif;
}

@include breakpoint(small) {
  body {
    background-color: #cceeff;
    color: #003366;
  }
}

@include breakpoint(medium) {
  body {
    background-color: #e6f2ff;
    color: #004080;
  }
}

@include breakpoint(large) {
  body {
    background-color: #ffffff;
    color: #000000;
  }
}

Important Notes

Use meaningful breakpoint names like small, medium, and large for clarity.

Keep your breakpoints consistent across your project for easier maintenance.

Test your site on different devices or use browser DevTools to resize and see the changes.

Summary

Responsive breakpoint mixins help you write clean, reusable media queries.

They make your website adapt smoothly to different screen sizes.

Using mixins saves time and keeps your styles organized.