[SASS] Responsive margin and padding spacers | https://www.damianwajer.com/blog/spacing-system/

spacers.scss

$spacers: (
  0: 0,
  1: .25rem, // ~4px
  2: .5rem, // ~8px
  3: .75rem, // ~12px
  4: 1rem, // 16px
  5: 1.5rem, // ~24px
  6: 2rem, // ~32px
  7: 3rem, // ~48px
  8: 4rem, // ~64px
  9: 6rem, // ~96px
  10: 8rem, // ~128px
  11: 12rem // ~192px
);

$grid-breakpoints: (
  0: 0,
  sm: 480px,
  md: 768px,
  lg: 1200px
);

@mixin media-breakpoint-up($breakpoint) {
  @if ($breakpoint != 0) {
    @media (min-width: map-get($grid-breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
      @content;
  }
}

@each $bname, $bvalue in $grid-breakpoints {
  @include media-breakpoint-up($bname) {
    $bname: if($bname != 0, "-#{$bname}-", "");
    @each $key, $value in $spacers {
      // Margin spacers
      .u-m#{$bname}#{$key} {
        margin: $value !important;
      }

      .u-mt#{$bname}#{$key} {
        margin-top: $value !important;
      }

      .u-mr#{$bname}#{$key} {
        margin-right: $value !important;
      }

      .u-mb#{$bname}#{$key} {
        margin-bottom: $value !important;
      }

      .u-ml#{$bname}#{$key} {
        margin-left: $value !important;
      }

      .u-mx#{$bname}#{$key} {
        margin-right: $value !important;
        margin-left: $value !important;
      }

      .u-my#{$bname}#{$key} {
        margin-top: $value !important;
        margin-bottom: $value !important;
      }

      // Negative margin spacers
      .u-nm#{$bname}#{$key} {
        margin: -$value !important;
      }

      .u-nmt#{$bname}#{$key} {
        margin-top: -$value !important;
      }

      .u-nmr#{$bname}#{$key} {
        margin-right: -$value !important;
      }

      .u-nmb#{$bname}#{$key} {
        margin-bottom: -$value !important;
      }

      .u-nml#{$bname}#{$key} {
        margin-left: -$value !important;
      }

      .u-nmx#{$bname}#{$key} {
        margin-right: -$value !important;
        margin-left: -$value !important;
      }

      .u-nmy#{$bname}#{$key} {
        margin-top: -$value !important;
        margin-bottom: -$value !important;
      }

      // Padding spacers
      .u-p#{$bname}#{$key} {
        padding: $value !important;
      }

      .u-pt#{$bname}#{$key} {
        padding-top: $value !important;
      }

      .u-pr#{$bname}#{$key} {
        padding-right: $value !important;
      }

      .u-pb#{$bname}#{$key} {
        padding-bottom: $value !important;
      }

      .u-pl#{$bname}#{$key} {
        padding-left: $value !important;
      }

      .u-px#{$bname}#{$key} {
        padding-right: $value !important;
        padding-left: $value !important;
      }

      .u-py#{$bname}#{$key} {
        padding-top: $value !important;
        padding-bottom: $value !important;
      }
    }
  }
}