Generated by SassMeister.com.

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}

spacing-scale.css

.u-mrgX0 {
  margin-left: 0;
  margin-right: 0;
}

.u-mrgY0 {
  margin-top: 0;
  margin-bottom: 0;
}

.u-mrgA0 {
  margin: 0;
}

.u-mrgT0 {
  margin-top: 0;
}

.u-mrgB0 {
  margin-bottom: 0;
}

.u-mrgL0 {
  margin-left: 0;
}

.u-mrgR0 {
  margin-right: 0;
}

.u-mrgX1 {
  margin-left: var(--scale-1);
  margin-right: var(--scale-1);
}

.u-mrgY1 {
  margin-top: var(--scale-1);
  margin-bottom: var(--scale-1);
}

.u-mrgA1 {
  margin: var(--scale-1);
}

.u-mrgT1 {
  margin-top: var(--scale-1);
}

.u-mrgB1 {
  margin-bottom: var(--scale-1);
}

.u-mrgL1 {
  margin-left: var(--scale-1);
}

.u-mrgR1 {
  margin-right: var(--scale-1);
}

.u-mrgX2 {
  margin-left: var(--scale-2);
  margin-right: var(--scale-2);
}

.u-mrgY2 {
  margin-top: var(--scale-2);
  margin-bottom: var(--scale-2);
}

.u-mrgA2 {
  margin: var(--scale-2);
}

.u-mrgT2 {
  margin-top: var(--scale-2);
}

.u-mrgB2 {
  margin-bottom: var(--scale-2);
}

.u-mrgL2 {
  margin-left: var(--scale-2);
}

.u-mrgR2 {
  margin-right: var(--scale-2);
}

.u-mrgX3 {
  margin-left: var(--scale-3);
  margin-right: var(--scale-3);
}

.u-mrgY3 {
  margin-top: var(--scale-3);
  margin-bottom: var(--scale-3);
}

.u-mrgA3 {
  margin: var(--scale-3);
}

.u-mrgT3 {
  margin-top: var(--scale-3);
}

.u-mrgB3 {
  margin-bottom: var(--scale-3);
}

.u-mrgL3 {
  margin-left: var(--scale-3);
}

.u-mrgR3 {
  margin-right: var(--scale-3);
}

.u-mrgX4 {
  margin-left: var(--scale-4);
  margin-right: var(--scale-4);
}

.u-mrgY4 {
  margin-top: var(--scale-4);
  margin-bottom: var(--scale-4);
}

.u-mrgA4 {
  margin: var(--scale-4);
}

.u-mrgT4 {
  margin-top: var(--scale-4);
}

.u-mrgB4 {
  margin-bottom: var(--scale-4);
}

.u-mrgL4 {
  margin-left: var(--scale-4);
}

.u-mrgR4 {
  margin-right: var(--scale-4);
}

.u-mrgX5 {
  margin-left: var(--scale-5);
  margin-right: var(--scale-5);
}

.u-mrgY5 {
  margin-top: var(--scale-5);
  margin-bottom: var(--scale-5);
}

.u-mrgA5 {
  margin: var(--scale-5);
}

.u-mrgT5 {
  margin-top: var(--scale-5);
}

.u-mrgB5 {
  margin-bottom: var(--scale-5);
}

.u-mrgL5 {
  margin-left: var(--scale-5);
}

.u-mrgR5 {
  margin-right: var(--scale-5);
}

.u-padX0 {
  padding-left: 0;
  padding-right: 0;
}

.u-padY0 {
  padding-top: 0;
  padding-bottom: 0;
}

.u-padA0 {
  padding: 0;
}

.u-padT0 {
  padding-top: 0;
}

.u-padB0 {
  padding-bottom: 0;
}

.u-padL0 {
  padding-left: 0;
}

.u-padR0 {
  padding-right: 0;
}

.u-padX1 {
  padding-left: var(--scale-1);
  padding-right: var(--scale-1);
}

.u-padY1 {
  padding-top: var(--scale-1);
  padding-bottom: var(--scale-1);
}

.u-padA1 {
  padding: var(--scale-1);
}

.u-padT1 {
  padding-top: var(--scale-1);
}

.u-padB1 {
  padding-bottom: var(--scale-1);
}

.u-padL1 {
  padding-left: var(--scale-1);
}

.u-padR1 {
  padding-right: var(--scale-1);
}

.u-padX2 {
  padding-left: var(--scale-2);
  padding-right: var(--scale-2);
}

.u-padY2 {
  padding-top: var(--scale-2);
  padding-bottom: var(--scale-2);
}

.u-padA2 {
  padding: var(--scale-2);
}

.u-padT2 {
  padding-top: var(--scale-2);
}

.u-padB2 {
  padding-bottom: var(--scale-2);
}

.u-padL2 {
  padding-left: var(--scale-2);
}

.u-padR2 {
  padding-right: var(--scale-2);
}

.u-padX3 {
  padding-left: var(--scale-3);
  padding-right: var(--scale-3);
}

.u-padY3 {
  padding-top: var(--scale-3);
  padding-bottom: var(--scale-3);
}

.u-padA3 {
  padding: var(--scale-3);
}

.u-padT3 {
  padding-top: var(--scale-3);
}

.u-padB3 {
  padding-bottom: var(--scale-3);
}

.u-padL3 {
  padding-left: var(--scale-3);
}

.u-padR3 {
  padding-right: var(--scale-3);
}

.u-padX4 {
  padding-left: var(--scale-4);
  padding-right: var(--scale-4);
}

.u-padY4 {
  padding-top: var(--scale-4);
  padding-bottom: var(--scale-4);
}

.u-padA4 {
  padding: var(--scale-4);
}

.u-padT4 {
  padding-top: var(--scale-4);
}

.u-padB4 {
  padding-bottom: var(--scale-4);
}

.u-padL4 {
  padding-left: var(--scale-4);
}

.u-padR4 {
  padding-right: var(--scale-4);
}

.u-padX5 {
  padding-left: var(--scale-5);
  padding-right: var(--scale-5);
}

.u-padY5 {
  padding-top: var(--scale-5);
  padding-bottom: var(--scale-5);
}

.u-padA5 {
  padding: var(--scale-5);
}

.u-padT5 {
  padding-top: var(--scale-5);
}

.u-padB5 {
  padding-bottom: var(--scale-5);
}

.u-padL5 {
  padding-left: var(--scale-5);
}

.u-padR5 {
  padding-right: var(--scale-5);
}

spacing-scale.scss

@mixin space-generator($class-base, $property, $class-suffix: null) {
  $space-map: (
    0,
    var(--scale-1),
    var(--scale-2),
    var(--scale-3),
    var(--scale-4),
    var(--scale-5)
  );
  $direction-map: (
    X: (
      unquote("#{$property}-left"),
      unquote("#{$property}-right"),
    ),
    Y: (
      unquote("#{$property}-top"),
      unquote("#{$property}-bottom"),
    ),
    A: $property,
    T: #{$property}-top,
    B: #{$property}-bottom,
    L: #{$property}-left,
    R: #{$property}-right,
  );

  @each $space in $space-map {
    $space-index: index($space-map, $space) - 1;

    @each $direction, $direction-attributes in $direction-map {
      #{$class-base}#{$direction}#{$space-index}#{$class-suffix} {
        @each $direction-attribute in $direction-attributes {
          #{$direction-attribute}: $space;
        }
      }
    }
  }
}

@include space-generator(".u-mrg", margin);
@include space-generator(".u-pad", padding);