Generated by SassMeister.com.

input.scss

$test:(
"m":margin,
"p":padding
);
$test2:(
"t":top,
"b":bottom,
"l":left,
"r":right);
$mp:(
    "a":auto,
    0:0px,
    1:2px,
    2:4px,
    3:6px,
    4:8px,
    5:10px
    );

@each $k1,$v1 in $test{
    @each $k4,$v4 in $mp{
        .#{$k1}-#{$k4}{
            #{$v1}:$v4;
        }
    }
 @each $k2,$v2 in $test2{
        @each $k3,$v3 in $mp{
            .#{$k1}#{$k2}-#{$k3}{
                #{$v1}-#{$v2}:$v3
            } 
        }   
    } 
}

$a : (
"red":red,
"blue":blue
);

@mixin show($v){
    background-color: lighten($v,30% );
    color: $v;
    border-radius: 10px;
    padding:5px;
}
    
    
@each $k,$v in $a{
.bg-#{$k}{
  @include show($v)
}  
}
$a : (
"red":red,
"blue":blue
);

@mixin show($v){
    background-color: lighten($v,30% );
    color: $v;
}
    
    
@each $k,$v in $a{
.bg-#{$k}{
  @include show($v)
}  
}

output.css

.m-a {
  margin: auto;
}

.m-0 {
  margin: 0px;
}

.m-1 {
  margin: 2px;
}

.m-2 {
  margin: 4px;
}

.m-3 {
  margin: 6px;
}

.m-4 {
  margin: 8px;
}

.m-5 {
  margin: 10px;
}

.mt-a {
  margin-top: auto;
}

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

.mt-1 {
  margin-top: 2px;
}

.mt-2 {
  margin-top: 4px;
}

.mt-3 {
  margin-top: 6px;
}

.mt-4 {
  margin-top: 8px;
}

.mt-5 {
  margin-top: 10px;
}

.mb-a {
  margin-bottom: auto;
}

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

.mb-1 {
  margin-bottom: 2px;
}

.mb-2 {
  margin-bottom: 4px;
}

.mb-3 {
  margin-bottom: 6px;
}

.mb-4 {
  margin-bottom: 8px;
}

.mb-5 {
  margin-bottom: 10px;
}

.ml-a {
  margin-left: auto;
}

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

.ml-1 {
  margin-left: 2px;
}

.ml-2 {
  margin-left: 4px;
}

.ml-3 {
  margin-left: 6px;
}

.ml-4 {
  margin-left: 8px;
}

.ml-5 {
  margin-left: 10px;
}

.mr-a {
  margin-right: auto;
}

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

.mr-1 {
  margin-right: 2px;
}

.mr-2 {
  margin-right: 4px;
}

.mr-3 {
  margin-right: 6px;
}

.mr-4 {
  margin-right: 8px;
}

.mr-5 {
  margin-right: 10px;
}

.p-a {
  padding: auto;
}

.p-0 {
  padding: 0px;
}

.p-1 {
  padding: 2px;
}

.p-2 {
  padding: 4px;
}

.p-3 {
  padding: 6px;
}

.p-4 {
  padding: 8px;
}

.p-5 {
  padding: 10px;
}

.pt-a {
  padding-top: auto;
}

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

.pt-1 {
  padding-top: 2px;
}

.pt-2 {
  padding-top: 4px;
}

.pt-3 {
  padding-top: 6px;
}

.pt-4 {
  padding-top: 8px;
}

.pt-5 {
  padding-top: 10px;
}

.pb-a {
  padding-bottom: auto;
}

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

.pb-1 {
  padding-bottom: 2px;
}

.pb-2 {
  padding-bottom: 4px;
}

.pb-3 {
  padding-bottom: 6px;
}

.pb-4 {
  padding-bottom: 8px;
}

.pb-5 {
  padding-bottom: 10px;
}

.pl-a {
  padding-left: auto;
}

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

.pl-1 {
  padding-left: 2px;
}

.pl-2 {
  padding-left: 4px;
}

.pl-3 {
  padding-left: 6px;
}

.pl-4 {
  padding-left: 8px;
}

.pl-5 {
  padding-left: 10px;
}

.pr-a {
  padding-right: auto;
}

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

.pr-1 {
  padding-right: 2px;
}

.pr-2 {
  padding-right: 4px;
}

.pr-3 {
  padding-right: 6px;
}

.pr-4 {
  padding-right: 8px;
}

.pr-5 {
  padding-right: 10px;
}

.bg-red {
  background-color: #ff9999;
  color: red;
  border-radius: 10px;
  padding: 5px;
}

.bg-blue {
  background-color: #9999ff;
  color: blue;
  border-radius: 10px;
  padding: 5px;
}

.bg-red {
  background-color: #ff9999;
  color: red;
}

.bg-blue {
  background-color: #9999ff;
  color: blue;
}

settings.json

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