Generated by SassMeister.com.

input.scss

$align-values: stretch center flex-start flex-end baseline initial inherit;
$self-values: auto;
$items-values: normal start end;

@mixin align($name, $values) {
    @each $value in $values {
        &-#{$name}-#{$value}
        {
            #{$name}: #{$value};
        }
    }
  }
  
.align {
    @include align(self, join($align-values, $self-values));
    @include align(items, join($align-values, $items-values));
}

output.css

.align-self-stretch {
  self: stretch;
}
.align-self-center {
  self: center;
}
.align-self-flex-start {
  self: flex-start;
}
.align-self-flex-end {
  self: flex-end;
}
.align-self-baseline {
  self: baseline;
}
.align-self-initial {
  self: initial;
}
.align-self-inherit {
  self: inherit;
}
.align-self-auto {
  self: auto;
}
.align-items-stretch {
  items: stretch;
}
.align-items-center {
  items: center;
}
.align-items-flex-start {
  items: flex-start;
}
.align-items-flex-end {
  items: flex-end;
}
.align-items-baseline {
  items: baseline;
}
.align-items-initial {
  items: initial;
}
.align-items-inherit {
  items: inherit;
}
.align-items-normal {
  items: normal;
}
.align-items-start {
  items: start;
}
.align-items-end {
  items: end;
}

settings.json

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