_generate-at-breakpoints.scss

/* ============================================================================
   @CORE -> MIXINS -> GENERATE AT BREAKPOINTS
   ========================================================================= */


/**
 * Generate classes which apply styling at different breakpoints which is fed
 * from the breakpoints defined here: Core -> Settings -> Breakpoints or any
 * custom breakpoint. The format of the generated class with a `min-width`
 * (default) media query is:
 *
   .[class-selector]-from-[breakpoint]
 *
 * E.g.
 *
   .u-list-inline-from-lap
 *
 * The format of the generated class with a `max-width` (apply via the `max`
 * flag) media query is:
 *
   .[class-selector]-up-to-[breakpoint]
 *
 * E.g.
 *
   .u-list-inline-up-to-lap
 *
 * Sometimes the selector that is passed into this mixin is more complex than a
 * single class. In these cases the `-from-lap` or `-up-to-` suffix usually
 * should not be appended to the end of the selector. To account for this,
 * put `{bp}` in the selector where `-from-lap` or `-up-to-` should be
 * inserted.
 *
 * E.g.
 *
 * `.u-demo{bp} li` will produce the selector `.u-demo-from-lap li`.
 *
 * @demo
 * http://codepen.io/team/westfieldlabs/full/Bcfyz
 *
 * @example
   @include generate-at-breakpoints('.u-text-size-small', all) {
     @include font-size($font-size-small);
   }

   @include generate-at-breakpoints('.u-demo{bp} li', palm lap) {
     vertical-align: top;
   }

   @include generate-at-breakpoints('.u-position-fixed', (400 max, 401 min,
    desk max)) {
     position: fixed;
   }

   @include generate-at-breakpoints('.u-position-fixed', 400 max) {
     position: fixed;
   }
 */


/**
 * Settings.
 */

// This placeholder will be replaced with the breakpoint name
$mixin-breakpoint-name-placeholder: "{bp}";

@mixin generate-at-breakpoints($class, $breakpoint-names: ()) {

  $all-breakpoint-names: map-keys($breakpoints);

  @if $breakpoint-names == all {
    $breakpoint-names: $all-breakpoint-names;
  }

  // When specifying one breakpoint with an explicit limit, it needs to be
  // casted into a list of lists, otherwise the mixin assumes there is a
  // breakpoint called 'max'
  @if length($breakpoint-names) == 2 and
      index((min max), nth($breakpoint-names, 2)) {
    $breakpoint-names-copy: $breakpoint-names;
    $breakpoint-names: ();
    $breakpoint-names: append($breakpoint-names, (nth($breakpoint-names-copy, 1)
     nth($breakpoint-names-copy, 2)));
  }

  @each $breakpoint-name in $breakpoint-names {

    $limit: "min";
    $joiner: "from";

    @if type-of($breakpoint-name) == list {
      $limit: nth($breakpoint-name, 2);
      $breakpoint-name: nth($breakpoint-name, 1);
    }
    @else {
      // Palm is a special case where it uses a `max-width` media query
      $limit: if($breakpoint-name == "palm", "max", "min");
    }

    @if $limit == max {
      $joiner: "up-to";
    }

    @include respond-to($breakpoint-name, $limit) {
      $final-selector: "#{$class}-#{$joiner}-#{$breakpoint-name}";

      // Handle complex selectors by replacing a placeholder with the
      // breakpoint suffix
      @if str_index($class, $mixin-breakpoint-name-placeholder) != null {
        $final-selector: str-replace($class, $mixin-breakpoint-name-placeholder,
         "-#{$joiner}-#{$breakpoint-name}");
      }

      // Output a class which applies the style at a given breakpoint
      #{$final-selector} {
        @content;
      }
    }
  }
}