SASS helper for margin spacing

_margin-helpers.scss

// Spacing options (in rem)
$spacing: (1, 2, 3, 4, 5, 6, 7, 8);

// Available positions
$margins: (top, bottom, left, right);

@each $space in $spacing {
    @each $margin in $margins {
        .m#{str-slice($margin, 0, 1)}-#{$space} {
            margin-#{$margin}: #{$space}rem !important;
        }
    }
}

@each $space in $spacing {
  .mx-#{$space} {
    margin-left: #{$space}rem !important;
    margin-right: #{$space}rem !important;
  }
}

@each $space in $spacing {
  .my-#{$space} {
    margin-top: #{$space}rem !important;
    margin-bottom: #{$space}rem !important;
  }
}

style.css

// Generated from above script
.mt-1 {
  margin-top: 1rem !important;
}

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

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

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

.mt-2 {
  margin-top: 2rem !important;
}

.mb-2 {
  margin-bottom: 2rem !important;
}

.ml-2 {
  margin-left: 2rem !important;
}

.mr-2 {
  margin-right: 2rem !important;
}

.mt-3 {
  margin-top: 3rem !important;
}

.mb-3 {
  margin-bottom: 3rem !important;
}

.ml-3 {
  margin-left: 3rem !important;
}

.mr-3 {
  margin-right: 3rem !important;
}

.mt-4 {
  margin-top: 4rem !important;
}

.mb-4 {
  margin-bottom: 4rem !important;
}

.ml-4 {
  margin-left: 4rem !important;
}

.mr-4 {
  margin-right: 4rem !important;
}

.mt-5 {
  margin-top: 5rem !important;
}

.mb-5 {
  margin-bottom: 5rem !important;
}

.ml-5 {
  margin-left: 5rem !important;
}

.mr-5 {
  margin-right: 5rem !important;
}

.mt-6 {
  margin-top: 6rem !important;
}

.mb-6 {
  margin-bottom: 6rem !important;
}

.ml-6 {
  margin-left: 6rem !important;
}

.mr-6 {
  margin-right: 6rem !important;
}

.mt-7 {
  margin-top: 7rem !important;
}

.mb-7 {
  margin-bottom: 7rem !important;
}

.ml-7 {
  margin-left: 7rem !important;
}

.mr-7 {
  margin-right: 7rem !important;
}

.mt-8 {
  margin-top: 8rem !important;
}

.mb-8 {
  margin-bottom: 8rem !important;
}

.ml-8 {
  margin-left: 8rem !important;
}

.mr-8 {
  margin-right: 8rem !important;
}

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

.mx-2 {
  margin-left: 2rem !important;
  margin-right: 2rem !important;
}

.mx-3 {
  margin-left: 3rem !important;
  margin-right: 3rem !important;
}

.mx-4 {
  margin-left: 4rem !important;
  margin-right: 4rem !important;
}

.mx-5 {
  margin-left: 5rem !important;
  margin-right: 5rem !important;
}

.mx-6 {
  margin-left: 6rem !important;
  margin-right: 6rem !important;
}

.mx-7 {
  margin-left: 7rem !important;
  margin-right: 7rem !important;
}

.mx-8 {
  margin-left: 8rem !important;
  margin-right: 8rem !important;
}

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

.my-2 {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.my-3 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.my-4 {
  margin-top: 4rem !important;
  margin-bottom: 4rem !important;
}

.my-5 {
  margin-top: 5rem !important;
  margin-bottom: 5rem !important;
}

.my-6 {
  margin-top: 6rem !important;
  margin-bottom: 6rem !important;
}

.my-7 {
  margin-top: 7rem !important;
  margin-bottom: 7rem !important;
}

.my-8 {
  margin-top: 8rem !important;
  margin-bottom: 8rem !important;
}