ANW Scaffolding with legacy spacing classes support

gistfile1.scss

/*  Scaffolding
/*--------------------------------------------------------------*/

/* Legacy spacing from website (e.g. row--vertical-spacing-top-2) used heavily
	 throughout app should be deprecated and Bootstrap 4 spacing used instead */

@for $i from 0 to 6 {
	.row--vertical-spacing-#{$i}         { margin-top: $grid-gutter-width * $i; margin-bottom: $grid-gutter-width * $i; }
	.row--vertical-spacing-top-#{$i}     { margin-top: $grid-gutter-width * $i; }
	.row--vertical-spacing-bottom-#{$i}  { margin-bottom: $grid-gutter-width * $i; }
}


/*--------------------------------------------------------------*/
/* Modified Bootstrap 4 alpha spacing */
/*--------------------------------------------------------------*/

$spacer:                     $grid-gutter-width / 2 !default;
$spacer-x:                   $spacer !default;
$spacer-y:                   $spacer !default;
$spacers: (
  0: (
    x:   0,
    y:   0
  ),
  1: (
    x:   $spacer-x,
    y:   $spacer-y
  ),
  2: (
    x:   ($spacer-x * 2),
    y:   ($spacer-y * 2)
  ),
  3: (
    x:   ($spacer-x * 3),
    y:   ($spacer-y * 3)
  )
) !default;

.w-100 { width: 100% !important; }

// Margin and Padding

.m-x-auto {
  margin-right: auto !important;
  margin-left:  auto !important;
}

@each $prop, $abbrev in (margin: m, padding: p) {
  @each $size, $lengths in $spacers {
    $length-x:   map-get($lengths, x);
    $length-y:   map-get($lengths, y);

    .#{$abbrev}-a-#{$size} { #{$prop}:        $length-y $length-x !important; } // a = All sides
    .#{$abbrev}-t-#{$size} { #{$prop}-top:    $length-y !important; }
    .#{$abbrev}-r-#{$size} { #{$prop}-right:  $length-x !important; }
    .#{$abbrev}-b-#{$size} { #{$prop}-bottom: $length-y !important; }
    .#{$abbrev}-l-#{$size} { #{$prop}-left:   $length-x !important; }

    // Axes
    .#{$abbrev}-x-#{$size} {
      #{$prop}-right:  $length-x !important;
      #{$prop}-left:   $length-x !important;
    }
    .#{$abbrev}-y-#{$size} {
      #{$prop}-top:    $length-y !important;
      #{$prop}-bottom: $length-y !important;
    }
  }
}