Generated by SassMeister.com.

input.scss

$spacing-properties: (
  "padding": "padding",
  "margin": "margin",
) !default;

$spacing-directions: (
  null: null,
  "-top": "-top",
  "-right": "-right",
  "-bottom": "-bottom",
  "-left": "-left",
  "-horizontal": "-left""-right",
  "-vertical": "-top""-bottom",
) !default;

$spacing-sizes: (
  "-xs": var(--space-xs),
  "-sm": var(--space-sm),
  "-md": var(--space-md),
  "-lg": var(--space-lg),
  "-xl": var(--space-xl),
  "-none": 0
) !default;

@each $property-namespace, $property in $spacing-properties {
  @each $direction-namespace, $direction-rules in $spacing-directions {
    @each $size-namespace, $size in $spacing-sizes {
      .u-#{$property-namespace}#{$direction-namespace}#{$size-namespace} {
        @each $direction in $direction-rules {
          #{$property}#{$direction}: $size  !important;
        }
      }
    }
  }
}

output.css

.u-padding-xs {
  padding: var(--space-xs) !important;
}

.u-padding-sm {
  padding: var(--space-sm) !important;
}

.u-padding-md {
  padding: var(--space-md) !important;
}

.u-padding-lg {
  padding: var(--space-lg) !important;
}

.u-padding-xl {
  padding: var(--space-xl) !important;
}

.u-padding-none {
  padding: 0 !important;
}

.u-padding-top-xs {
  padding-top: var(--space-xs) !important;
}

.u-padding-top-sm {
  padding-top: var(--space-sm) !important;
}

.u-padding-top-md {
  padding-top: var(--space-md) !important;
}

.u-padding-top-lg {
  padding-top: var(--space-lg) !important;
}

.u-padding-top-xl {
  padding-top: var(--space-xl) !important;
}

.u-padding-top-none {
  padding-top: 0 !important;
}

.u-padding-right-xs {
  padding-right: var(--space-xs) !important;
}

.u-padding-right-sm {
  padding-right: var(--space-sm) !important;
}

.u-padding-right-md {
  padding-right: var(--space-md) !important;
}

.u-padding-right-lg {
  padding-right: var(--space-lg) !important;
}

.u-padding-right-xl {
  padding-right: var(--space-xl) !important;
}

.u-padding-right-none {
  padding-right: 0 !important;
}

.u-padding-bottom-xs {
  padding-bottom: var(--space-xs) !important;
}

.u-padding-bottom-sm {
  padding-bottom: var(--space-sm) !important;
}

.u-padding-bottom-md {
  padding-bottom: var(--space-md) !important;
}

.u-padding-bottom-lg {
  padding-bottom: var(--space-lg) !important;
}

.u-padding-bottom-xl {
  padding-bottom: var(--space-xl) !important;
}

.u-padding-bottom-none {
  padding-bottom: 0 !important;
}

.u-padding-left-xs {
  padding-left: var(--space-xs) !important;
}

.u-padding-left-sm {
  padding-left: var(--space-sm) !important;
}

.u-padding-left-md {
  padding-left: var(--space-md) !important;
}

.u-padding-left-lg {
  padding-left: var(--space-lg) !important;
}

.u-padding-left-xl {
  padding-left: var(--space-xl) !important;
}

.u-padding-left-none {
  padding-left: 0 !important;
}

.u-padding-horizontal-xs {
  padding-left: var(--space-xs) !important;
  padding-right: var(--space-xs) !important;
}

.u-padding-horizontal-sm {
  padding-left: var(--space-sm) !important;
  padding-right: var(--space-sm) !important;
}

.u-padding-horizontal-md {
  padding-left: var(--space-md) !important;
  padding-right: var(--space-md) !important;
}

.u-padding-horizontal-lg {
  padding-left: var(--space-lg) !important;
  padding-right: var(--space-lg) !important;
}

.u-padding-horizontal-xl {
  padding-left: var(--space-xl) !important;
  padding-right: var(--space-xl) !important;
}

.u-padding-horizontal-none {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.u-padding-vertical-xs {
  padding-top: var(--space-xs) !important;
  padding-bottom: var(--space-xs) !important;
}

.u-padding-vertical-sm {
  padding-top: var(--space-sm) !important;
  padding-bottom: var(--space-sm) !important;
}

.u-padding-vertical-md {
  padding-top: var(--space-md) !important;
  padding-bottom: var(--space-md) !important;
}

.u-padding-vertical-lg {
  padding-top: var(--space-lg) !important;
  padding-bottom: var(--space-lg) !important;
}

.u-padding-vertical-xl {
  padding-top: var(--space-xl) !important;
  padding-bottom: var(--space-xl) !important;
}

.u-padding-vertical-none {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.u-margin-xs {
  margin: var(--space-xs) !important;
}

.u-margin-sm {
  margin: var(--space-sm) !important;
}

.u-margin-md {
  margin: var(--space-md) !important;
}

.u-margin-lg {
  margin: var(--space-lg) !important;
}

.u-margin-xl {
  margin: var(--space-xl) !important;
}

.u-margin-none {
  margin: 0 !important;
}

.u-margin-top-xs {
  margin-top: var(--space-xs) !important;
}

.u-margin-top-sm {
  margin-top: var(--space-sm) !important;
}

.u-margin-top-md {
  margin-top: var(--space-md) !important;
}

.u-margin-top-lg {
  margin-top: var(--space-lg) !important;
}

.u-margin-top-xl {
  margin-top: var(--space-xl) !important;
}

.u-margin-top-none {
  margin-top: 0 !important;
}

.u-margin-right-xs {
  margin-right: var(--space-xs) !important;
}

.u-margin-right-sm {
  margin-right: var(--space-sm) !important;
}

.u-margin-right-md {
  margin-right: var(--space-md) !important;
}

.u-margin-right-lg {
  margin-right: var(--space-lg) !important;
}

.u-margin-right-xl {
  margin-right: var(--space-xl) !important;
}

.u-margin-right-none {
  margin-right: 0 !important;
}

.u-margin-bottom-xs {
  margin-bottom: var(--space-xs) !important;
}

.u-margin-bottom-sm {
  margin-bottom: var(--space-sm) !important;
}

.u-margin-bottom-md {
  margin-bottom: var(--space-md) !important;
}

.u-margin-bottom-lg {
  margin-bottom: var(--space-lg) !important;
}

.u-margin-bottom-xl {
  margin-bottom: var(--space-xl) !important;
}

.u-margin-bottom-none {
  margin-bottom: 0 !important;
}

.u-margin-left-xs {
  margin-left: var(--space-xs) !important;
}

.u-margin-left-sm {
  margin-left: var(--space-sm) !important;
}

.u-margin-left-md {
  margin-left: var(--space-md) !important;
}

.u-margin-left-lg {
  margin-left: var(--space-lg) !important;
}

.u-margin-left-xl {
  margin-left: var(--space-xl) !important;
}

.u-margin-left-none {
  margin-left: 0 !important;
}

.u-margin-horizontal-xs {
  margin-left: var(--space-xs) !important;
  margin-right: var(--space-xs) !important;
}

.u-margin-horizontal-sm {
  margin-left: var(--space-sm) !important;
  margin-right: var(--space-sm) !important;
}

.u-margin-horizontal-md {
  margin-left: var(--space-md) !important;
  margin-right: var(--space-md) !important;
}

.u-margin-horizontal-lg {
  margin-left: var(--space-lg) !important;
  margin-right: var(--space-lg) !important;
}

.u-margin-horizontal-xl {
  margin-left: var(--space-xl) !important;
  margin-right: var(--space-xl) !important;
}

.u-margin-horizontal-none {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.u-margin-vertical-xs {
  margin-top: var(--space-xs) !important;
  margin-bottom: var(--space-xs) !important;
}

.u-margin-vertical-sm {
  margin-top: var(--space-sm) !important;
  margin-bottom: var(--space-sm) !important;
}

.u-margin-vertical-md {
  margin-top: var(--space-md) !important;
  margin-bottom: var(--space-md) !important;
}

.u-margin-vertical-lg {
  margin-top: var(--space-lg) !important;
  margin-bottom: var(--space-lg) !important;
}

.u-margin-vertical-xl {
  margin-top: var(--space-xl) !important;
  margin-bottom: var(--space-xl) !important;
}

.u-margin-vertical-none {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

settings.json

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