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;
  }
}

Comments

  1. User Avatar
    Luke
    Permalink to comment#

    Really enjoying this mixin, however i’m wondering how i might use this with retina devices. Is it as simple as adding another variable, or do i need to add an additional if statement?

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag