$spaceamounts: ('none', 5, 8, 10, 15, 20, 25, 24, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 96, 100, 110, 120, 130, 140, 145, 150, 155, 160, 165, 170, 175, 200, 215, 230, 250); // Adjust this to include the pixel amounts you need.

$sides: (top, bottom, left, right); // Leave this variable alone
$sides_group : ('t-b', 'l-r', 'all');

@function setMargin($size){
  $value: #{$size}px;
  @if $size == 'none' {
    $value: 0px;
  }
  @return $value;
}


@each $space in $spaceamounts {
  @each $side_group in $sides_group {
    .m-#{$side_group}-#{$space} {
      @if $side_group == 't-b' {
        margin-top: setMargin($space) !important;
        margin-bottom: setMargin($space) !important;
      } @else if $side_group == 'l-r' {
        margin-left: setMargin($space) !important;
        margin-right: setMargin($space) !important;
      } @else {
        margin: setMargin($space) !important;
      }
    }
    .p-#{$side_group}-#{$space} {
      @if $side_group == 't-b' {
        padding-top: setMargin($space) !important;
        padding-bottom: setMargin($space) !important;
      } @else if $side_group == 'l-r' {
        padding-left: setMargin($space) !important;
        padding-right: setMargin($space) !important;
      } @else {
        padding: setMargin($space) !important;
      }
    }
  }
  @each $side in $sides {
    .m-#{str-slice($side, 0, 1)}-#{$space} {
      margin-#{$side}: setMargin($space) !important;
    }
    .p-#{str-slice($side, 0, 1)}-#{$space} {
      padding-#{$side}: setMargin($space) !important;
    }
  }
}


@each $breakpoint in $breakpoints {
  
  @include media-max(to-upper-case($breakpoint)) {

    @each $space in $spaceamounts {

      @each $side_group in $sides_group {
        .m-#{$breakpoint}-#{$side_group}-#{$space} {
          @if $side_group == 't-b' {
            margin-top: setMargin($space) !important;
            margin-bottom: setMargin($space) !important;
          } @else if $side_group == 'l-r' {
            margin-left: setMargin($space) !important;
            margin-right: setMargin($space) !important;
          } @else {
            margin: setMargin($space) !important;
          }
        }
        .p-#{$breakpoint}-#{$side_group}-#{$space} {
          @if $side_group == 't-b' {
            padding-top: setMargin($space) !important;
            padding-bottom: setMargin($space) !important;
          } @else if $side_group == 'l-r' {
            padding-left: setMargin($space) !important;
            padding-right: setMargin($space) !important;
          } @else {
            padding: setMargin($space) !important;
          }
        }
      }
      @each $side in $sides {
        .m-#{$breakpoint}-#{str-slice($side, 0, 1)}-#{$space} {
          margin-#{$side}: setMargin($space) !important;
        }
        .p-#{$breakpoint}-#{str-slice($side, 0, 1)}-#{$space} {
          padding-#{$side}: setMargin($space) !important;
        }
      }
    } // end space loop

  } // end media query condition

}