Sass Spacing Mixin - Generated by SassMeister.com.

input.scss

$properties: (
  m: margin,
  p: padding
);

$directions: (
  a: all,
  t: top,
  r: right,
  b: bottom,
  l: left,
  x: (left, right),
  y: (top, bottom)
);

@mixin spacing($size: 12) {
  @each $pk, $pv in $properties {
      @each $dk, $dv in $directions {
        $isA: $dk == a;
        $isX: $dk == x;
        $isY: $dk == y;
        
        $uk: $dk;
        @if $isA {
            $uk: null;
        }
        
        .#{$pk}#{$uk}-#{$size} {
            @if $isX or $isY {
                @if $isX {
                    #{$pv}: 0 #{$size}px;  
                } @else {
                    #{$pv}: #{$size}px 0;  
                }
                // @each $v in $dv {
                //     #{$pv}-#{$v}: #{$size}px;
                // }
            } @else if $isA {
                #{$pv}: #{$size}px;
            } @else {
                #{$pv}-#{$dv}: #{$size}px;
            }
        }
    }
  }
}

@include spacing(16);

output.css

.m-16 {
  margin: 16px;
}

.mt-16 {
  margin-top: 16px;
}

.mr-16 {
  margin-right: 16px;
}

.mb-16 {
  margin-bottom: 16px;
}

.ml-16 {
  margin-left: 16px;
}

.mx-16 {
  margin: 0 16px;
}

.my-16 {
  margin: 16px 0;
}

.p-16 {
  padding: 16px;
}

.pt-16 {
  padding-top: 16px;
}

.pr-16 {
  padding-right: 16px;
}

.pb-16 {
  padding-bottom: 16px;
}

.pl-16 {
  padding-left: 16px;
}

.px-16 {
  padding: 0 16px;
}

.py-16 {
  padding: 16px 0;
}

settings.json

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