Generates a array of spacing helper classes for margin and padding

_spacing-helper.scss

// Customisable spacing units. these can be changed and new ones added
$spacing-units: (
  1: 3px,
  2: 5px,
  3: 8px,
  4: 13px,
  5: 21px,
);

// These will not change this is just to help generate the classes with the correct naming
$spacing-naming: (
  top: t,
  right: r,
  bottom: b,
  left: l
);

@each $key, $value in $spacing-units {
  
  @each $keyq, $valueq in $spacing-naming {
    .m#{$valueq}-#{$key} {
      margin-#{$keyq}: $value;
    }
  }
  @each $keyq, $valueq in $spacing-naming {
    .p#{$valueq}-#{$key} {
      margin-#{$keyq}: $value;
    }
  }
  .pa-#{$key} {
    padding: $value;
  }
  .ma-#{$key} {
    padding: $value;
  }
  
}

generate helper classes for padding and margin

Example for Margin

.mt-1 {
    margin-top: 3px;
}
.mr-1 {
    margin-right: 3px;
}
.mb-1 {
    margin-bottom: 3px;
}
.ml-1 {
    margin-left 3px;
}
.ma-1 {
    margin: 3px;
}