nopaque/app/static/sass/components/_spacing.scss

@each $spacing-shortcut-name, $spacing-shortcut-value in $spacing-shortcuts {
  @each $spacing-name, $spacing-value in $spacing-values {
    // All directions
    .#{$spacing-shortcut-value}-#{$spacing-name} {
      #{$spacing-shortcut-name}: $spacing-value !important;
    }

    // Horizontal axis
    .#{$spacing-shortcut-value}x-#{$spacing-name} {
      #{$spacing-shortcut-name}-left: $spacing-value !important;
      #{$spacing-shortcut-name}-right: $spacing-value !important;
    }

    // Vertical axis
    .#{$spacing-shortcut-value}y-#{$spacing-name} {
      #{$spacing-shortcut-name}-top: $spacing-value !important;
      #{$spacing-shortcut-name}-bottom: $spacing-value !important;
    }

    // Cardinal directions
    @each $spacing-direction-name, $spacing-direction-value in $spacing-directions {
      .#{$spacing-shortcut-value}#{$spacing-direction-value}-#{$spacing-name} {
        #{$spacing-shortcut-name}-#{$spacing-direction-name}: $spacing-value !important;
      }
    }
  }
}