Generated by SassMeister.com.

input.scss

$spaces: (
  2: 0.125rem,
  4: 0.25rem,
  8: 0.5rem,
  12: 0.75rem,
  16: 1rem,
  20: 1.25rem,
  24: 1.5rem,
  32: 2rem,
  40: 2.5rem,
  48: 3rem,
  60: 3.75rem,
  64: 4rem,
  96: 6rem,
  128: 8rem,
  160: 10rem,
);

.flex {
  display: flex;
  flex-direction: row;
}

.flex > .column,
.flex.reverse > .column:last-child {
  flex: 1;
  margin-right: 24px;
}

@each $space, $value in $spaces {
  .flex.gutter-#{$space} > .column,
  .flex.reverse.gutter-#{$space} > .column:last-child {
    margin-right: $value;
  }
}

.flex > .column:last-child {
  margin-right: 0;
}

.flex.reverse {
  flex-direction: row-reverse;
}

.flex.reverse > .column:first-child {
  margin-right: 0px;
}

.flex.vertical {
  flex-direction: column;
}

.flex.vertical > .column,
.flex.vertical.reverse > .column:last-child {
  margin-right: 0;
  margin-bottom: 24px;
}

@each $space, $value in $spaces {
  .flex.vertical.gutter-#{$space} > .column,
  .flex.vertical.reverse.gutter-#{$space} > .column:last-child {
    margin-bottom: $value;
  }
}

.flex.vertical > .column:last-child {
  margin-bottom: 0;
}

.flex.vertical.reverse {
  flex-direction: column-reverse;
}

.flex.vertical.reverse > .column:first-child {
  margin-bottom: 0;
}

output.css

.flex {
  display: flex;
  flex-direction: row;
}

.flex > .column,
.flex.reverse > .column:last-child {
  flex: 1;
  margin-right: 24px;
}

.flex.gutter-2 > .column,
.flex.reverse.gutter-2 > .column:last-child {
  margin-right: 0.125rem;
}

.flex.gutter-4 > .column,
.flex.reverse.gutter-4 > .column:last-child {
  margin-right: 0.25rem;
}

.flex.gutter-8 > .column,
.flex.reverse.gutter-8 > .column:last-child {
  margin-right: 0.5rem;
}

.flex.gutter-12 > .column,
.flex.reverse.gutter-12 > .column:last-child {
  margin-right: 0.75rem;
}

.flex.gutter-16 > .column,
.flex.reverse.gutter-16 > .column:last-child {
  margin-right: 1rem;
}

.flex.gutter-20 > .column,
.flex.reverse.gutter-20 > .column:last-child {
  margin-right: 1.25rem;
}

.flex.gutter-24 > .column,
.flex.reverse.gutter-24 > .column:last-child {
  margin-right: 1.5rem;
}

.flex.gutter-32 > .column,
.flex.reverse.gutter-32 > .column:last-child {
  margin-right: 2rem;
}

.flex.gutter-40 > .column,
.flex.reverse.gutter-40 > .column:last-child {
  margin-right: 2.5rem;
}

.flex.gutter-48 > .column,
.flex.reverse.gutter-48 > .column:last-child {
  margin-right: 3rem;
}

.flex.gutter-60 > .column,
.flex.reverse.gutter-60 > .column:last-child {
  margin-right: 3.75rem;
}

.flex.gutter-64 > .column,
.flex.reverse.gutter-64 > .column:last-child {
  margin-right: 4rem;
}

.flex.gutter-96 > .column,
.flex.reverse.gutter-96 > .column:last-child {
  margin-right: 6rem;
}

.flex.gutter-128 > .column,
.flex.reverse.gutter-128 > .column:last-child {
  margin-right: 8rem;
}

.flex.gutter-160 > .column,
.flex.reverse.gutter-160 > .column:last-child {
  margin-right: 10rem;
}

.flex > .column:last-child {
  margin-right: 0;
}

.flex.reverse {
  flex-direction: row-reverse;
}

.flex.reverse > .column:first-child {
  margin-right: 0px;
}

.flex.vertical {
  flex-direction: column;
}

.flex.vertical > .column,
.flex.vertical.reverse > .column:last-child {
  margin-right: 0;
  margin-bottom: 24px;
}

.flex.vertical.gutter-2 > .column,
.flex.vertical.reverse.gutter-2 > .column:last-child {
  margin-bottom: 0.125rem;
}

.flex.vertical.gutter-4 > .column,
.flex.vertical.reverse.gutter-4 > .column:last-child {
  margin-bottom: 0.25rem;
}

.flex.vertical.gutter-8 > .column,
.flex.vertical.reverse.gutter-8 > .column:last-child {
  margin-bottom: 0.5rem;
}

.flex.vertical.gutter-12 > .column,
.flex.vertical.reverse.gutter-12 > .column:last-child {
  margin-bottom: 0.75rem;
}

.flex.vertical.gutter-16 > .column,
.flex.vertical.reverse.gutter-16 > .column:last-child {
  margin-bottom: 1rem;
}

.flex.vertical.gutter-20 > .column,
.flex.vertical.reverse.gutter-20 > .column:last-child {
  margin-bottom: 1.25rem;
}

.flex.vertical.gutter-24 > .column,
.flex.vertical.reverse.gutter-24 > .column:last-child {
  margin-bottom: 1.5rem;
}

.flex.vertical.gutter-32 > .column,
.flex.vertical.reverse.gutter-32 > .column:last-child {
  margin-bottom: 2rem;
}

.flex.vertical.gutter-40 > .column,
.flex.vertical.reverse.gutter-40 > .column:last-child {
  margin-bottom: 2.5rem;
}

.flex.vertical.gutter-48 > .column,
.flex.vertical.reverse.gutter-48 > .column:last-child {
  margin-bottom: 3rem;
}

.flex.vertical.gutter-60 > .column,
.flex.vertical.reverse.gutter-60 > .column:last-child {
  margin-bottom: 3.75rem;
}

.flex.vertical.gutter-64 > .column,
.flex.vertical.reverse.gutter-64 > .column:last-child {
  margin-bottom: 4rem;
}

.flex.vertical.gutter-96 > .column,
.flex.vertical.reverse.gutter-96 > .column:last-child {
  margin-bottom: 6rem;
}

.flex.vertical.gutter-128 > .column,
.flex.vertical.reverse.gutter-128 > .column:last-child {
  margin-bottom: 8rem;
}

.flex.vertical.gutter-160 > .column,
.flex.vertical.reverse.gutter-160 > .column:last-child {
  margin-bottom: 10rem;
}

.flex.vertical > .column:last-child {
  margin-bottom: 0;
}

.flex.vertical.reverse {
  flex-direction: column-reverse;
}

.flex.vertical.reverse > .column:first-child {
  margin-bottom: 0;
}

settings.json

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