SCSS for "stack", "inset", and "inline" container components

container.scss

$space-zero: 0px;
$space-xs: 2px;
$space-s: 4px;
$space-m: 7px;
$space-l: 14px;
$space-xl: 30px;
$space-xxl: 64px;
$space-xxxl: 128px;

$spaces: (
  zero: $space-zero,
  xs: $space-xs,
  s: $space-s,
  m: $space-m,
  l: $space-l,
  xl: $space-xl,
  xxl: $space-xxl,
  xxxl: $space-xxxl
);

.container {
  &.container--flush-left {
    text-align: left;
  }
  &.container--flush-right {
    text-align: right;
  }
  &.container--center {
    text-align: center;
  }
}

@each $key, $value in $spaces {
  .container.container--inset-#{$key} {
    padding: $value;
    overflow: hidden;
  }
}

@each $key, $value in $spaces {
  .container.container--inline-#{$key} {
    margin: -$value / 2;
    & > .container__item {
      display: inline-block;
      vertical-align: middle;
      margin: $value / 2;
    }
  }
}

@each $key, $value in $spaces {
  .container.container--inline-stack-#{$key} {
    margin-bottom: -$value / 2;
    & > .container__item {
      margin-bottom: $value / 2;
    }
  }
}

@each $key, $value in $spaces {
  .container.container--stack-#{$key} {
    & > .container__item:not(:last-child) {
      margin-bottom: $value;
    }
  }
}