This is a simple sass (rather scss) recreation of a bootstrap like spacing utility which allows you to quickly and easily set margin and padding sizes through classes like `mx-3`, `p-2`, and `pt-5`. You can define spacing values in $spacing and add or remove shorthand properties with the $prefixes variable. This uses `!important` to override any…

_spacing.scss

@mixin simpleSpace {

  // margin and padding values
  $spacings: (
          0,
          .25rem,
          .5rem,
          1rem,
          1.5rem,
          2rem,
  ) !default;

  // margin and padding shorthand prefixes
  $prefixes: (
          p  : padding,
          px : (padding-left, padding-right),
          py : (padding-top, padding-bottom),

          pt : padding-top,
          pr : padding-right,
          pb : padding-bottom,
          pl : padding-left,

          m  : margin,
          mx : (margin-left, margin-right),
          my : (margin-top, margin-bottom),

          mt : margin-top,
          mr : margin-right,
          mb : margin-bottom,
          ml : margin-left,
  ) !default;

  // Loop generating all spacing styles
  @each $attr-short, $attr-list in $prefixes {
    @each $space in $spacings {
      .#{$attr-short}-#{ index(($spacings), $space)-1 } {
        @each $attr in $attr-list {
          #{$attr}: #{$space} !important;
        }
      }
    }
  }
}

@include simpleSpace();

Sample CSS output:

.p-0 {
  padding: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.px-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-1 {
  padding-top: 0.25rem !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.pr-1 {
  padding-right: 0.25rem !important;
}

. . .