Generated by SassMeister.com.

input.scss

@mixin spacing {
  --spacing-none: 0;
  --spacing-extra-small: 4px;
  --spacing-small: 8px;
  --spacing-medium: 12px;
  --spacing-large: 16px;
  --spacing-extra-large: 20px;
  --spacing-extra-extra-large: 32px;
  --spacing-extra-extra-extra-large: 40px;
}

$gaps: (
  '1': --spacing-extra-small,
  '2': --spacing-small,
  '3': --spacing-medium,
  '4': --spacing-large,
  '5': --spacing-extra-large,
  '8': --spacing-extra-extra-large,
  '10': --spacing-extra-extra-extra-large
);

@each $size, $spacing in $gaps {
  .gap-#{$size} {
    gap: var($spacing);
  }
  .gap-h-#{$size} {
    column-gap: var($spacing);
  }
  .gap-v-#{$size} {
    row-gap: var($spacing);
  }
}

output.css

.gap-1 {
  gap: var(--spacing-extra-small);
}

.gap-h-1 {
  column-gap: var(--spacing-extra-small);
}

.gap-v-1 {
  row-gap: var(--spacing-extra-small);
}

.gap-2 {
  gap: var(--spacing-small);
}

.gap-h-2 {
  column-gap: var(--spacing-small);
}

.gap-v-2 {
  row-gap: var(--spacing-small);
}

.gap-3 {
  gap: var(--spacing-medium);
}

.gap-h-3 {
  column-gap: var(--spacing-medium);
}

.gap-v-3 {
  row-gap: var(--spacing-medium);
}

.gap-4 {
  gap: var(--spacing-large);
}

.gap-h-4 {
  column-gap: var(--spacing-large);
}

.gap-v-4 {
  row-gap: var(--spacing-large);
}

.gap-5 {
  gap: var(--spacing-extra-large);
}

.gap-h-5 {
  column-gap: var(--spacing-extra-large);
}

.gap-v-5 {
  row-gap: var(--spacing-extra-large);
}

.gap-8 {
  gap: var(--spacing-extra-extra-large);
}

.gap-h-8 {
  column-gap: var(--spacing-extra-extra-large);
}

.gap-v-8 {
  row-gap: var(--spacing-extra-extra-large);
}

.gap-10 {
  gap: var(--spacing-extra-extra-extra-large);
}

.gap-h-10 {
  column-gap: var(--spacing-extra-extra-extra-large);
}

.gap-v-10 {
  row-gap: var(--spacing-extra-extra-extra-large);
}

settings.json

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