Spacing before and after in scss with scss-maps

input.scss

$spacing-orientation-map: (
  'frame-space-before': 'top',
  'frame-space-after': 'bottom'
);

$spacing-map: (
  'extra-small': '1',
  'small': '2'
);


@each $o-key, $o-value in $spacing-orientation-map {
    
    .#{$o-key} {
        
        @each $key, $value in $spacing-map {
            &-#{$key} {
                @if $o-value == top {
                    margin-top: #{$value}rem;
                } @else if $o-value == bottom {
                    margin-bottom: #{$value}rem;
                }
            }
        }
    }
}

output.css

.frame-space-before-extra-small {
  margin-top: 1rem;
}
.frame-space-before-small {
  margin-top: 2rem;
}

.frame-space-after-extra-small {
  margin-bottom: 1rem;
}
.frame-space-after-small {
  margin-bottom: 2rem;
}

settings.json

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