_responsive.scss

/* ==========================================================================
   Helpers used in responsive webdesign
   ========================================================================== */

/* Variables
   ========================================================================== */

/**
 * List of available breakpoints
 */

$bits-responsive-breakpoints: (
  (v2 "(min-width: 25em)")
  (v3 "(min-width: 50em)")
) !default;

/**
 * 1. If it is an old IE, don't serve any media query.
 * 2. If it is an old IE, what breakpoints to include.
 */

$bits-old-ie: false !default; /* 1 */
$bits-old-ie-breakpoints: () !default; /* 2 */

/* Mixins
   ========================================================================== */

/**
 * Insert media query
 *
 * Example:
 *
 * $bits-responsive-breakpoints: (
 *   (v2 "min-width: 25em")
 *   (v3 "min-width: 50em")
 * );
 *
 * @include breakpoint(v2) {
 *   .example {
 *     text-align: center;
 *   }
 * }
 *
 * @include breakpoint(v3) {
 *   .example {
 *     text-align: right;
 *   }
 * }
 */

@mixin breakpoint($name) {
  $breakpoint-found: false;

  @each $breakpoint in $bits-responsive-breakpoints {
    $breakpoint-name: nth($breakpoint, 1);
    $media-query: nth($breakpoint, 2);

    @if $name == $breakpoint-name {
      $breakpoint-found: true;

      @if $bits-old-ie == true {
        @each $ie-bp in $bits-old-ie-breakpoints {
          @if $name == $ie-bp {
            @content;
          }
        }
      }
      @else {
        @media only screen and #{$media-query} {
          @content;
        }
      }
    }
  }

  @if $breakpoint-found == false {
    @warn "Breakpoint '#{$name}' does not exist.";
  }
}