Responsive utility classes

_display.scss

$sc-display-values: (
  'none': 'none',
  'block': 'block',
  'inline-block': 'inline-block',
  'inline': 'inline',
  'flex': 'flex',
) !default;

@mixin generate-display-classes {
  @each $sc-breakpoint-name, $sc-breakpoint-value in sc-responsive-utility-breakpoints() {
    @include mq($sc-breakpoint-name) {
      @each $property-namespace, $property-value in $sc-display-values {
        .u-display-#{$property-namespace}#{sc-breakpoint-token($sc-breakpoint-name)} {
          display: unquote($property-value) !important;
        }
      }
    }
  }
}

@include generate-display-classes;

_spacing.scss

/* ==========================================================================
   #SPACINGS
   ========================================================================== */

/**
 * Utility classes to put specific spacing values onto elements. The below loop
 * will generate us a suite of classes like:
 *
 *   .u-margin-top {}
 *   .u-padding-left@medium {}
 *   .u-padding-horizontal {}
 *   .u-padding-vertical-none {}
 */

$sc-spacing-directions: (
  null: null,
  '-top': '-top',
  '-right': '-right',
  '-bottom': '-bottom',
  '-left': '-left',
  '-horizontal': '-left' '-right',
  '-vertical': '-top' '-bottom',
) !default;

$sc-spacing-properties: (
  'padding': 'padding',
  'margin': 'margin',
) !default;

$sc-spacing-sizes: (
  null: $sc-global-spacing-unit,
  '-none': 0
) !default;

@each $sc-breakpoint-name, $sc-breakpoint-value in sc-responsive-utility-breakpoints() {
  @include mq($sc-breakpoint-name) {
    @each $property-namespace, $property in $sc-spacing-properties {
      @each $direction-namespace, $direction-rules in $sc-spacing-directions {
        @each $size-namespace, $size in $sc-spacing-sizes {
          .u-#{$property-namespace}#{$direction-namespace}#{$size-namespace}#{sc-breakpoint-token($sc-breakpoint-name)} {
            @each $direction in $direction-rules {
              #{$property}#{$direction}: $size !important;
            }
          }
        }
      }
    }
  }
}