(PDS-442) Add breakpoint tools to sass-variables

Adds variables and mixins to the `sass-variables` package to allow for
configuring and responding to different breakpoints.

There are three breakpoints: small, medium, and large:

  - Portrait-mode phones tend to be smaller than 'small'
  - Landscape-mode phones tend to be between 'small' and 'medium'
  - Tablets and small browser windows tend to be between 'medium' and 'large'
  - Browser windows and some landscape-mode tablets tend to be larger
    than 'large'

Default breakpoints can be overridden by defining your own
`@breakpoints` map in your stylesheets before importing
`sass-variables`.

Two mixins are included:

- `respond-above` applies styles to widths greater than the given size
- `respond-below` applies styles to widths below the given size

Author: caseywilliams

packages/sass-variables/_index.scss

@@ -2,3 +2,4 @@
 @import './common';
 @import './fonts';
 @import './typography';
+@import './responsive';

packages/sass-variables/_responsive.scss

@@ -0,0 +1,29 @@
+$breakpoints: (
+  // Portrait-mode phones are generally smaller than the 'small' breakpoint.
+    'small': 576px,
+  // Landscape-mode phones are between 'small' and 'medium'.
+    'medium': 768px,
+  // Tablets + smaller desktop browser windows are between 'medium' and 'large'.
+    'large': 1180px,
+  // Desktop browser windows + large landscape-mode tablets are larger than 'large'.
+) !default;
+
+@mixin respond-above($breakpoint) {
+  @if map-has-key($breakpoints, $breakpoint) {
+    @media (min-width: map-get($breakpoints, $breakpoint)) {
+      @content;
+    }
+  } @else {
+    @warn "Unrecognized breakpoint '#{$breakpoint}'. Available breakpoints are: #{map-keys($breakpoints)}.";
+  }
+}
+
+@mixin respond-below($breakpoint) {
+  @if map-has-key($breakpoints, $breakpoint) {
+    @media (max-width: map-get($breakpoints, $breakpoint) - 1) {
+      @content;
+    }
+  } @else {
+    @warn "Unrecognized breakpoint '#{$breakpoint}'. Available breakpoints are: #{map-keys($breakpoints)}.";
+  }
+}