$spacers: (0: '0rem',1: '0.25rem','1_5': '0.375rem',2: '0.5rem','2_5': '0.625rem',3: '0.75rem',4: '1rem',5: '1.25rem',6: '1.5rem',8: '2rem',10: '2.5rem',12: '3rem',16: '4rem',20: '5rem',24: '6rem',32: '8rem',40: '10rem',48: '12rem',56: '14rem',64: '16rem')


// set key value pairs for margin and padding
@each $prop, $letter in (margin: m, padding: p)

  // loop through top, right, bottom, and left
  @each $direction, $d in (top: t, right: r, bottom: b, left: l, vertical: x, horizontal: y)

    // loop through the spacers we've set
    @each $unit, $rem in $spacers

      .#{$letter}-#{$unit}
        #{$prop}: #{$rem}

      @if $d == t or $d == r or $d == b or $d == l
        .#{$letter}#{$d}-#{$unit}
          #{$prop}-#{$direction}: #{$rem} !important
      
      @else if $d == x

        // add in x-axis and y-axis spacing
        .#{$letter}x-#{$unit}
          #{$prop}-left: #{$rem}
          #{$prop}-right: #{$rem}
      
      @else if $d == y

        // add in x-axis and y-axis spacing
        .#{$letter}y-#{$unit} 
          #{$prop}-top: #{$rem}
          #{$prop}-bottom: #{$rem}