tailwindcss-like SASS helpers

spacing-helpers.scss

$spacings: (
  xxl: 110,
  xl: 80,
  l: 60,
  m: 40,
  s: 20,
  xs: 10,
  xx: 8,
);


$sides: (top, right, bottom, left);

@each $sizeName, $value in $spacings {
  @each $side in $sides {
    .p#{str-slice($side, 0, 1)}-#{$sizeName} {
      padding-#{$side}: #{$value};
    }

    .-m#{str-slice($side, 0, 1)}-#{$sizeName} {
      margin-#{$side}: -#{$value};
    }

    .m#{str-slice($side, 0, 1)}-#{$sizeName} {
      margin-#{$side}: #{$value};
    }
  }

  .px-#{$sizeName} {
    padding-left: #{$value};
    padding-right: #{$value};
  }
  .py-#{$sizeName} {
    padding-top: #{$value};
    padding-bottom: #{$value};
  }

  .-mx-#{$sizeName} {
    margin-left: -#{$value};
    margin-right: -#{$value};
  }
  .-my-#{$sizeName} {
    margin-top: -#{$value};
    margin-bottom: -#{$value};
  }

  .mx-#{$sizeName} {
    margin-left: #{$value};
    margin-right: #{$value};
  }
  .my-#{$sizeName} {
    margin-top: #{$value};
    margin-bottom: #{$value};
  }
}