"padding" and "margin" utility classes with SCSS

utility.scss

$space: 0.25rem;

// position shortcuts.
$positions: 'x', 'y', 't', 'b', 'l', 'r';

// range multiplier
$ranges: 1, 2, 3, 4, 5, 6, 7, 8, 'auto';

@function autoOrValue($sp, $ra) {
    @if($ra == 'auto') {
        @return 'auto';
    } @else {
        @return $sp * $ra;
    }
}

/*
 Create padding utility classes: px-1; px-2 ... 
*/
@each $p in $positions {
  @each $r in $ranges  {
    .p#{$p}-#{$r} {
        @if $p == 'x' {
            padding-left: autoOrValue($space, $r);
            padding-right: autoOrValue($space, $r);
        }
        @if $p == 'y' {
            padding-top: autoOrValue($space, $r);
            padding-bottom: autoOrValue($space, $r);
        }
        @if $p == 't' {
            padding-top: autoOrValue($space, $r);
        }
        @if $p == 'b' {
            padding-bottom: autoOrValue($space, $r);
        }
        @if $p == 'l' {
            padding-left: autoOrValue($space, $r);
        }
        @if $p == 'r' {
            padding-right: autoOrValue($space, $r);
        }
    }
  }
}

/* No position indication. Apply on every position */
@each $r in $ranges  {
    .p-#{$r} {
            padding: autoOrValue($space, $r);
        }
    }

/*
 Create margin utility classes: mx-1; mx-2 ... 
*/
@each $p in $positions {
    @each $r in $ranges  {
      .m#{$p}-#{$r} {
          @if $p == 'x' {
              margin-left: autoOrValue($space, $r);
              margin-right: autoOrValue($space, $r);
          }
          @if $p == 'y' {
              margin-top: autoOrValue($space, $r);
              margin-bottom: autoOrValue($space, $r);
          }
          @if $p == 't' {
              margin-top: autoOrValue($space, $r);
          }
          @if $p == 'b' {
              margin-bottom: autoOrValue($space, $r);
          }
          @if $p == 'l' {
              margin-left: autoOrValue($space, $r);
          }
          @if $p == 'r' {
              margin-right: autoOrValue($space, $r);
          }
      }
    }
  }

/* No position indication. Apply on every position */
@each $r in $ranges  {
.m-#{$r} {
        margin: autoOrValue($space, $r);
    }
}