A mixin that applies responsive spacing from a map

_mixins.scss

// A mixin that applies responsive spacing from a map
// Usage: @include u-set-spacing-style('page-spacing');
@mixin u-set-spacing-style($group-name) {
  $group: map-get($spacing, $group-name);  

  @each $property, $value in $group {
    $is-breakpoint: variable-exists('breakpoints') and map-has-key($breakpoints, $property) and type-of($value) == 'map';
    
    @include u-set-breakpoint(if($is-breakpoint, $property, null)) {
      @if ($is-breakpoint) {
        $subproperties: $value;
        @each $subproperty, $subvalue in $subproperties {
          @include u-configure-spacing-style($subproperty, $subvalue);
        }
      } @else {
        @include u-configure-spacing-style($property, $value);
      }
    }
  }
}


@mixin u-configure-spacing-style($property, $value) {
  $axis-positions: (
    'x': left right,
    'y': top bottom
  );
  @if (str-index($property, '-x') or str-index($property, '-y')) {
    $axis: str-slice($property, str-length($property));
    
    @if (type-of($value) == 'list') {
      $positions: map-get($axis-positions, $axis);

      @each $position in $positions {
        $i: index($positions, $position);
        #{str-slice($property, 1, -3)}-#{$position}: nth($value, $i);
      }
    } @else {
      $positions: map-get($axis-positions, $axis);
      
      @each $position in $positions {
        #{str-slice($property, 1, -3)}-#{$position}: $value;
      }
    }
  } @else {
    #{$property}: $value;
  }
}


@mixin u-set-breakpoint($breakpoint: null) {
  @if ($breakpoint and variable-exists('breakpoints') and map-has-key($breakpoints, $breakpoint)) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @content;
  }
}

_spacing.scss

// First level lists spacing patterns, second and third list properties.
// Properties can be:
// 1. margin, padding (1-4 values, with traditional CSS order)
// 2. margin-x, margin-y, padding-x, padding-y (1-2 values, order is top-bottom/left-right)
// 3. [padding/margin]-[left/right/top/bottom] (1 value)
$spacing: (
  'page-spacing': (
    'margin-y': 20px,
    'padding-y': 10px 40px,
    'large': (
      'padding-x': 40px 60px,
      'margin-top': 100px
    )
  ),
  // 'card-spacing': ()
);