@mixin spacer-prop($selector, $prop, $i, $rem) {
  .#{$selector}-#{$i} {
    #{$prop}: $rem !important;  
  }
  .#{$selector}x-#{$i} {
    #{$prop}-left: $rem !important;
    #{$prop}-right: $rem !important;
  }
  .#{$selector}y-#{$i} {
    #{$prop}-top: $rem !important;
    #{$prop}-bottom: $rem !important;
  }
  .#{$selector}l-#{$i} {
    #{$prop}-left: $rem !important;
  }
  .#{$selector}t-#{$i} {
    #{$prop}-top: $rem !important;
  }
  .#{$selector}r-#{$i} {
    #{$prop}-right: $rem !important;
  }
  .#{$selector}b-#{$i} {
    #{$prop}-bottom: $rem !important;
  }
}

@mixin spacers() {
  $i: 0;
  $rem: 0;
  @while $i < 6 {
    @include spacer-prop(p, padding, $i, $rem);
    @include spacer-prop(m, margin, $i, $rem);

    @if $i == 0 {
      $rem: .25rem; 
    } @else {
      $rem: ($rem * 2);
    }
    $i: $i + 1;
  }
}

.ml-auto {
  margin-left: auto !important;
}

.mr-auto {
  margin-right: auto !important;
}

.mt-auto {
  margin-top: auto !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.m-auto {
  margin: auto !important;
}

.my-em {
  margin-top: 1em !important;
  margin-bottom: 1em !important;
}

.mx-em {
  margin-left: 1em !important;
  margin-right: 1em !important;
}

.mt-em {
  margin-top: 1em !important;
}

.mb-em {
  margin-bottom: 1em !important;
}

.ml-em {
  margin-left: 1em !important;
}

.mr-em {
  margin-right: 1em !important;
}

.m-em {
  margin: 1em;
}

@include spacers();