SCSS margin/padding mixin with responsiveness

generates.css

.mt-1 {
  margin-top: 1rem; }

.pt-1 {
  padding-top: 1rem; }

@media (min-width: 768px) {
  .mt-sm-4 {
    margin-top: 4rem; }

  .pt-sm-4 {
    padding-top: 4rem; } }

// ... etc

marginPaddingMixin.scss

$sides: (
"": "",
"t": "top",
"b": "bottom",
"l": "left",
"r": "right",
);

$breakpoints: (
"": "",
"xs": 576px,
"sm": 768px,
"md": 992px,
"lg": 1200px,
);

@each $breakName, $breakValue in $breakpoints {
  @each $sideName, $sideValue in $sides {
    @for $i from 0 through 10 {
      
      $property: if($sideName == '', '', -#{$sideValue});
      $space: $i;
      $selector: '';

      @if $breakName != "" {
        $selector: #{$sideName}-#{$breakName}-#{$i};
      } @else {
        $selector: #{$sideName}-#{$i};
      }

      @if $breakName != "" {
        @media (min-width: $breakValue) {
          .m#{$selector} {
            margin#{$property}: #{$space}rem;
          }
  
          .p#{$selector} {
            padding#{$property}: #{$space}rem;
          }
        }
      } @else {
        .m#{$selector} {
          margin#{$property}: #{$space}rem;
        }

        .p#{$selector} {
          padding#{$property}: #{$space}rem;
        }
      }
    }
  }
}