SASS helper for creating position spacing

_positions-helpers.scss

// Amount in (rem) for spacing options
$spacing: (1, 2, 3, 4, 5, 6);

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

@each $space in $spacing {
    @each $position in $positions {
        .#{$position}-#{$space} {
            #{$position}: #{$space}rem !important;
        }
    }
}

style.css

// CSS generated by the positions-helper script

.top-1 {
  top: 1rem !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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