Sass Responsive Mixins

Building a Basic respond-to() Mixin

The core idea: accept a breakpoint name, look it up in a shared map, and wrap the caller's styles in the resulting media query using @content. Every component then calls this one mixin instead of writing raw media queries.

@use 'sass:map';

$breakpoints: (sm: 576px, md: 768px, lg: 992px, xl: 1200px);

@mixin respond-to($breakpoint) {
  @if not map.has-key($breakpoints, $breakpoint) {
    @error "Unknown breakpoint: #{$breakpoint}";
  }
  @media (min-width: map.get($breakpoints, $breakpoint)) {
    @content;
  }
}

The @error check protects against typos, calling respond-to(mdd) fails loudly at compile time instead of silently producing no media query at all.

Calling the Mixin

.component {
  @include respond-to(md) {
    display: flex;
  }
}

• The mixin call reads like a sentence: "respond to md and up."
• Any number of declarations can go inside the passed content block.
• The mixin can be extended with additional parameters for direction (min/max) or ranges.
• Centralizing this logic in one mixin means updating a breakpoint value in one place updates every usage.

Responsive Mixins Cheatsheet

Common variants of a breakpoint mixin for different query needs.

Adding a max-width Variant

Even in a primarily mobile-first project, you'll occasionally need to target "below a breakpoint" instead of "at or above it." A companion mixin keeps this consistent instead of writing a one-off raw query.

@mixin respond-below($breakpoint) {
  @media (max-width: map.get($breakpoints, $breakpoint) - 1px) {
    @content;
  }
}

.mobile-menu {
  @include respond-below(md) {
    display: block;
  }
}

Building a Between-Range Mixin

Occasionally a style needs to apply only within a specific range, common for tablet-only adjustments. A respond-between() mixin combines both bounds into one media query.

@mixin respond-between($min, $max) {
  @media (min-width: map.get($breakpoints, $min))
    and (max-width: map.get($breakpoints, $max) - 1px) {
    @content;
  }
}

.tablet-only-banner {
  @include respond-between(md, lg) {
    display: block;
  }
}

Sharing the Mixin Across a Project

In practice, this mixin lives inside abstracts/_mixins.scss and is @used wherever needed, exactly the pattern covered in the Project Structure and 7-1 Pattern lessons.

// abstracts/_mixins.scss
@use 'sass:map';
@use 'tokens';

@mixin respond-to($breakpoint) { /* ... */ }

// components/_nav.scss
@use '../abstracts/mixins';

.nav {
  @include mixins.respond-to(md) { display: flex; }
}

Common Mistakes

• Writing raw @media queries in individual components after already building a shared mixin, defeating its purpose.
• Forgetting the - 1px adjustment in a max-width variant, causing an overlapping range with the min-width breakpoint above it.
• Not validating the breakpoint name argument, letting a typo silently produce broken or missing responsive behavior.
• Building too many highly specific mixin variants instead of a small, well-designed core set (respond-to, respond-below, respond-between).

Key Takeaways

• A shared respond-to() mixin eliminates hardcoded pixel values across a project's components.
• Companion mixins (respond-below, respond-between) cover max-width and range-based needs consistently.
• Validating breakpoint names with @error catches typos at compile time instead of producing silently broken CSS.
• These mixins belong in a shared abstracts partial, loaded wherever a component needs responsive behavior.