@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; } } } }