Utility: SASS spacing generator

Utility: Spacing

// ==============================================
// Utility - Spacing
// ==============================================

:root {
  --sizeBase: 1rem;

  // Sizing
  --size0: 0;
  --size2: calc(var(--sizeBase) - 0.8rem);
  --size4: calc(var(--sizeBase) - 0.6rem);
  --size6: calc(var(--sizeBase) - 0.4rem);
  --size8: calc(var(--sizeBase) - 0.2rem);
  --size10: var(--sizeBase);
  --size12: calc(var(--sizeBase) + 0.2rem);
  --size14: calc(var(--sizeBase) + 0.4rem);
  --size16: calc(var(--sizeBase) + 0.6rem);
  --size20: calc(var(--sizeBase) + 1rem);
  --size24: calc(var(--sizeBase) + 1.4rem);
  --size32: calc(var(--sizeBase) + 2.2rem);
  --size40: calc(var(--sizeBase) + 3.0rem);
  --size48: calc(var(--sizeBase) + 3.8rem);
  --size56: calc(var(--sizeBase) + 4.6rem);
  --size64: calc(var(--sizeBase) + 6.4rem);
  --size80: calc(var(--sizeBase) + 7.0rem);
}


$sizes: 0, 2, 4, 6, 8, 12, 14, 16, 20, 24, 32, 40, 48, 56, 64, 80;

@mixin layout-loop($selector, $property) {
  .#{$selector} {
    @each $size in $sizes {
      &--#{$size} {
        #{$property}: var(--size#{$size}) !important
      }
    }
  }
}

@mixin stacks($selector, $property) {
  .#{$selector} {
    @each $size in $sizes {
      &--#{$size} {
        > * + * {
          #{$property}: var(--size#{$size})
        }
      }
    }
  }
}

// Stacks
// CSS class usage: stack--12
@include stacks("stack", "margin-top");
@include stacks("stack-left", "margin-left");


// Margins
@include layout-loop("mg", "margin");
@include layout-loop("mt", "margin-top");
@include layout-loop("mb", "margin-bottom");
@include layout-loop("ml", "margin-left");
@include layout-loop("mr", "margin-right");

// Paddings
@include layout-loop("pd", "padding");
@include layout-loop("pt", "padding-top");
@include layout-loop("pb", "padding-bottom");
@include layout-loop("pl", "padding-left");
@include layout-loop("pr", "padding-right");

// Flex gap
@include layout-loop("gap", "gap");