Sass Breakpoint Mixin

breakpoint-mixin.md

Sass Breakpoint Mixin

This mixin is based on work by Hugo Giraudel http://www.sitepoint.com/managing-responsive-breakpoints-sass/. It uses Sass Maps http://sass-lang.com/documentation/file.SASS_REFERENCE.html#maps, interpolation http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_ and an if..else to convert the breakpoints you enter into media queries.

You don't have to know how the mixing works exactly (although the article goes into some explanation), but you do have to know how to modify it to set your own breakpoints. Lines 10-15 show how that is done. This technique is nice in that it allows you to decide if you are going to use min-width, max-width or a combination of the two. Alternatively you could set what is given in ems here as variables and use those.

breakpoint-mixin.scss

//This is just an explanation of the em sizes given below. You can delete lines 1-6. Change breakpoints starting on line 11 to match what you want
// 30em; //480 and over = 480 / 16
// 50em; //800px and over = 800 / 16
// 67.5em; //1080px and over = 1080 / 16
// 80em; //1280px and over = 1280 / 16
// 90em; //1440px and over = 1440 / 16

/* Change and add breakpoints here to match what you need */
$breakpoints: (
  'xsmall-only'  : ( max-width:  30em ),
  'small'  : ( min-width:  30.01em ),
  'medium' : ( min-width:  50em ),
  'large'  : ( min-width: 67.5em ),
  'xlarge' : ( min-width: 80em ),
  'xxlarge': ( min-width: 90em)
);
  
@mixin respond-to($name) {
  // If the key exists in the map
  @if map-has-key($breakpoints, $name) {
    // Prints a media query based on the value
    @media #{inspect(map-get($breakpoints, $name))} {
      @content;
    }
  }
 
  // If the key doesn't exist in the map
  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Please make sure it is defined in `$breakpoints` map.";
  }
}

example-use.scss

//a quick example of the mixin in action
.box{
  
  /* Now here we use the above Sass */
  @include respond-to(small) { 
      width: 50%; 
      float: left;
  }
  
  @include respond-to(medium) { 
      width: 33%; 
      float: left;
  }
  
  @include respond-to(large) { 
      width: 25%; 
      float: left;
  }
  
  @include respond-to(xlarge) { 
      width: 20%; 
      float: left;
  }
}