example._responsive.scss

/* =====================================================================
 * SUSHI RESPONSIVE
 *
 * All files are disabled to save bandwidth by default. You may enable
 * all responsive modifiers/utilities at once, but that will increase
 * the file size substantially.
 *
 * You may (actually should) include here the responsive classes from
 * any custom modules you create. This makes the code cleaner (and
 * smaller) since equal media queries will be written in the same place.
 * ===================================================================== */

@if (variable-exists(mq-breakpoints)) {

  @each $breakpointName, $breakpointValue in $mq-breakpoints {

    $breakpoint: #{$breakpointSeparator}#{$breakpointName};

    @include mq($from: $breakpointName) {

      @include layoutModifiers($breakpoint);
      @include wrapperModifiers($breakpoint);

      @include displayUtility($breakpoint);
      @include flexUtility($breakpoint);
      @include overflowUtility($breakpoint);
      @include positionUtility($breakpoint);
      @include spacingUtility($breakpoint);
      @include typographyUtility($breakpoint);

    }

  }

}