Skip to main content
Home / Code Snippets / Sass / Mixin to Manage Breakpoints

Mixin to Manage Breakpoints

Responsive Web Design creations often exist over several different breakpoints. Managing those breakpoints is not always easy. Using them and updating them can sometimes be tedious. Hence the need for a mixin to handle breakpoint configuration and usage.

Simple version

First you need a map of breakpoints, associated to names.

$breakpoints: (
  'small':  767px,
  'medium': 992px,
  'large':  1200px
) !default;

Then, the mixin will use this map.

/// Mixin to manage responsive breakpoints
/// @author Hugo Giraudel
/// @param {String} $breakpoint - Breakpoint name
/// @require $breakpoints
@mixin respond-to($breakpoint) {
  // If the key exists in the map
  @if map-has-key($breakpoints, $breakpoint) {
    // Prints a media query based on the value
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  }
 
  // If the key doesn't exist in the map
  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Available breakpoints are: #{map-keys($breakpoints)}.";
  }
}

Usage:

.selector {
  color: red;
  
  @include respond-to('small') {
    color: blue;
  }
}

Result:

.selector {
  color: red;
}
@media (min-width: 767px) {
  .selector {
    color: blue;
  }
}

Advanced version

The simple version only makes it possible to use min-width media queries. To use more advanced queries, we can tweak our initial map and mixin a bit.

$breakpoints: (
  'small':  ( min-width:  767px ),
  'medium': ( min-width:  992px ),
  'large':  ( min-width: 1200px )
) !default;
/// Mixin to manage responsive breakpoints
/// @author Hugo Giraudel
/// @param {String} $breakpoint - Breakpoint name
/// @require $breakpoints
@mixin respond-to($breakpoint) {
  // If the key exists in the map
  @if map-has-key($breakpoints, $breakpoint) {
    // Prints a media query based on the value
    @media #{inspect(map-get($breakpoints, $breakpoint))} {
      @content;
    }
  }
 
  // If the key doesn't exist in the map
  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Available breakpoints are: #{map-keys($breakpoints)}.";
  }
}

Usage:

.selector {
  color: red;
  
  @include respond-to('small') {
    color: blue;
  }
}

Result:

.selector {
  color: red;
}
@media (min-width: 767px) {
  .selector {
    color: blue;
  }
}
icon-link icon-logo-star icon-search icon-star