@each $type in (margin, padding) {
  @each $size, $value in (none, xs, sm, md, lg, xl),
    (0, 0.25rem, 0.5rem, 1rem, 2rem, 5rem)
  {
    .$(type)--$(size) {
      $(type): $(value) !important;
    }

    @each $side in (top, left, bottom, right) {
      .$(type)-$(side)--$(size) {
        $(type)-$(side): $(value) !important;
      }
    }

    .$(type)-vert--$(size) {
      $(type)-bottom: $(value) !important;
      $(type)-top: $(value) !important;
    }

    .$(type)-horiz--$(size) {
      $(type)-left: $(value) !important;
      $(type)-right: $(value) !important;
    }
  }
}