breakpoints.scss

// http://codepen.io/jantimon/pen/meNYaj
$break-small: 629px;
$break-large: 950px;

$breakpointsMinWidth: (
  'mobile': null,
  'tablet' : $break-small + 1,
  'desktop': $break-large + 1
);

$breakpointsMaxWidth: (
  'mobile' : $break-small,
  'tablet': $break-large,
  'desktop': null
);

/**
 * Usage:
 * @include respond-to(tablet) {
 *   // styles
 * }
 * @include respond-to(mobile, tablet) {
 *   // styles
 * }
 * @include respond-to(tablet, desktop) {
 *   // styles
 * }
 */
@mixin respond-to($media, $mediaTypes...) {
  $minBreakpoint: map-get($breakpointsMinWidth, $media);
  $maxBreakpoint: map-get($breakpointsMaxWidth, $media);
  // Iterate through all arguments and get the smallest min and the largest max breakpoint
  @each $mediaType in $mediaTypes {
    $mediaTypeMaxBreakpoint: map-get($breakpointsMaxWidth, $mediaType);
    @if ($minBreakpoint != null) {
      $mediaTypeMinBreakpoint: map-get($breakpointsMinWidth, $mediaType);
      @if (($mediaTypeMinBreakpoint == null) or ($minBreakpoint > $mediaTypeMinBreakpoint)) {
          $minBreakpoint: $mediaTypeMinBreakpoint;
      }
    }
    @if ($maxBreakpoint != null) {
      $mediaTypeMaxBreakpoint: map-get($breakpointsMaxWidth, $mediaType);
      @if (($mediaTypeMaxBreakpoint == null) or ($maxBreakpoint < $mediaTypeMaxBreakpoint)) {
          $maxBreakpoint: $mediaTypeMaxBreakpoint;
      }
    }
  }

  @if (($minBreakpoint == null) and ($maxBreakpoint != null)) {
    @media only screen and (max-width: $maxBreakpoint) { @content; }
  }
  @else if (($minBreakpoint != null) and ($maxBreakpoint != null)) {
    @media only screen and (min-width: $minBreakpoint) and (max-width: $maxBreakpoint) { @content; }
  }
  @else if (($minBreakpoint != null) and ($maxBreakpoint == null)) {
    @media only screen and (min-width: $minBreakpoint) { @content; }
  }
  @else {
    @content;
  }
}