Reusable Breakpoint Mixins

A breakpoint map and a responsive mixin can standardize media-query usage across a codebase. This avoids scattered breakpoint values and makes the intended responsive behavior more visible.

A map can associate semantic names such as tablet and desktop with width values. A mixin can validate the supplied name, retrieve its value, and emit a media query using @content.

The breakpoint names should describe the layout transition rather than an assumed physical device. If the content requires a new intermediate layout, add a breakpoint based on the actual design requirement.

Validated Breakpoint Mixin

@use "sass:map";

$breakpoints: (
  tablet: 48rem,
  desktop: 72rem,
  wide: 90rem
);

@mixin up($name) {
  $value: map.get($breakpoints, $name);

  @if $value == null {
    @error "Unknown breakpoint: #{$name}";
  }

  @media (min-width: $value) {
    @content;
  }
}

.layout {
  display: grid;
  grid-template-columns: 1fr;

  @include up(tablet) {
    grid-template-columns: 14rem 1fr;
  }
}

💡 The mixin retrieves a breakpoint from the map and raises a compilation error if the key does not exist. This helps prevent silent configuration mistakes. The included content becomes the body of the media query. Use this pattern when it improves consistency across many components rather than wrapping every media query unnecessarily.

Knowledge Check

Why is it useful to validate a breakpoint name before generating a media query?

Reusable Breakpoint Mixins

STAY UPDATED WITH BYTES!