Generated by SassMeister.com.

input.scss

@use "sass:map";

$spacing: (
    a    : 4px,
    b    : 8px,
    c    : 12px,
    // d    : 16px,
    // e    : 24px,
    // f    : 32px,
    // g    : 40px,
    // h    : 56px,
    // i    : 64px,
    // j    : 80px
);

$spacing-map: map.merge((
    '': 0
), $spacing);

@mixin spacing-classes($spacings, $prefix, $modifier) {
    @each $spacing-value, $value in $spacings {
        $spacing-value-str: if($spacing-value == '', '', '-');
        $modifier-str: if($modifier == '', '', '--#{$modifier}');
        $suffix: #{$spacing-value-str}#{$spacing-value}#{$modifier-str};
        
        .u-#{$prefix}#{$suffix} {
            @content($spacing-value)
        }
    }
}

@include spacing-classes($spacing-map, 'pad', '') using ($spacingValue) {
    padding: spacing(#{$spacingValue});
}

@include spacing-classes($spacing-map, 'pad', 'top') using ($spacingValue) {
    padding-top: spacing(#{$spacingValue});
}

@include spacing-classes($spacing-map, 'pad', 'bottom') using ($spacingValue) {
    padding-bottom: spacing(#{$spacingValue});
}

@include spacing-classes($spacing-map, 'pad', 'left') using ($spacingValue) {
    padding-left: spacing(#{$spacingValue});
}

@include spacing-classes($spacing-map, 'pad', 'right') using ($spacingValue) {
    padding-right: spacing(#{$spacingValue});
}

@include spacing-classes($spacing-map, 'pad', 'horizontal') using ($spacingValue) {
    padding-left: spacing(#{$spacingValue});
    padding-right: spacing(#{$spacingValue});
}

@include spacing-classes($spacing-map, 'pad', 'vertical') using ($spacingValue) {
    padding-bottom: spacing(#{$spacingValue});
    padding-top: spacing(#{$spacingValue});
}

output.css

.u-pad {
  padding: spacing();
}

.u-pad-a {
  padding: spacing(a);
}

.u-pad-b {
  padding: spacing(b);
}

.u-pad-c {
  padding: spacing(c);
}

.u-pad--top {
  padding-top: spacing();
}

.u-pad-a--top {
  padding-top: spacing(a);
}

.u-pad-b--top {
  padding-top: spacing(b);
}

.u-pad-c--top {
  padding-top: spacing(c);
}

.u-pad--bottom {
  padding-bottom: spacing();
}

.u-pad-a--bottom {
  padding-bottom: spacing(a);
}

.u-pad-b--bottom {
  padding-bottom: spacing(b);
}

.u-pad-c--bottom {
  padding-bottom: spacing(c);
}

.u-pad--left {
  padding-left: spacing();
}

.u-pad-a--left {
  padding-left: spacing(a);
}

.u-pad-b--left {
  padding-left: spacing(b);
}

.u-pad-c--left {
  padding-left: spacing(c);
}

.u-pad--right {
  padding-right: spacing();
}

.u-pad-a--right {
  padding-right: spacing(a);
}

.u-pad-b--right {
  padding-right: spacing(b);
}

.u-pad-c--right {
  padding-right: spacing(c);
}

.u-pad--horizontal {
  padding-left: spacing();
  padding-right: spacing();
}

.u-pad-a--horizontal {
  padding-left: spacing(a);
  padding-right: spacing(a);
}

.u-pad-b--horizontal {
  padding-left: spacing(b);
  padding-right: spacing(b);
}

.u-pad-c--horizontal {
  padding-left: spacing(c);
  padding-right: spacing(c);
}

.u-pad--vertical {
  padding-bottom: spacing();
  padding-top: spacing();
}

.u-pad-a--vertical {
  padding-bottom: spacing(a);
  padding-top: spacing(a);
}

.u-pad-b--vertical {
  padding-bottom: spacing(b);
  padding-top: spacing(b);
}

.u-pad-c--vertical {
  padding-bottom: spacing(c);
  padding-top: spacing(c);
}

settings.json

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