Managing breakpoints in Sass

_sass-breakpoints.md

Uses a map to store breakpoint values for screen, component and anything else you can think of.

Has a layout indicator to show you the type of breakpoint (screen, component, etc.), the name (s, m, l, etc.) and the pixel value of the break.

This demo uses Bourbon Neat for generating media queries, but of course, use whatever you want.

Usage:

.foo {
  content: 'Mobile-first Styles';
  
  @include media(break(screen, l)) {
    content: 'Large Screen Styles';
  }
}

functions.scss

@function strip-units($val) {
  @return ($val / ($val * 0 + 1));
}

@function em($px, $base: $em-base) {
  @return ($px / $base) * 1em;
}

@function break($type, $name) {
  @return map-get(map-get($breakpoints, $type), $name);
}

layout-indicator.scss

@if $is-testing == true {
  body:before {
    background: rgba(red, .5);
    bottom: 0;
    color: white;
    content: '';
    display: block;
    font-size: 12px;
    left: 0;
    line-height: 1;
    padding: 10px 20px;
    position: fixed;
    z-index: 100;

    @each $type, $types in $breakpoints {
      @each $name, $value in $types {
        // Bourbon Neat is a dependant for generating media queries.
        // [http://thoughtbot.github.io/neat-docs/latest/#media]
        @include media(break($type, $name)) {
          $px: strip-units(break($type, $name)) * $em-base;
          content: '#{$type, $name} (#{$px})';
        }
      }
    }
  }
}

settings.scss

$is-testing: true;
$em-base: 16px !default;

$breakpoints: (
  'screen': (
    'xl': em(1200px),
    'l-max': em(1200px - 1px),
    'l': em(870px),
    'm-max': em(870px - 1px),
    'm': em(640px),
    's-max': em(640px - 1px),
    's': em(480px),
    'xs-max': em(480px - 1px),
    'xs': em(320px)
  ),
  'component': (
    'header-nav': em(750px),
    'article-sidebar': em(900px)
  )
) !global;