Sass mixin to customize margin and padding. Visit blog posts https://bit.ly/3bg4Rqs

margin.scss

// _margin.scss
@mixin margin($uid: margin, $unit: px, $step: 10, $from: 0, $through: 3) {
  $base: (
    '': '',
    't': '-top',
    'r': '-right',
    'b': '-bottom',
    'l': '-left',
    'x': ('-left', '-right'),
    'y': ('-top', '-bottom')
  );
  @for $i from $from through $through {
    @each $prop, $value in $base {
      @if length($value) > 1 {        
        .#{$uid}#{$prop}-#{$i} {
          margin#{nth($value, 1)}: $i * $step#{$unit};
          margin#{nth($value, 2)}: $i * $step#{$unit};
        }
      } @else {
        .#{$uid}#{$prop}-#{$i} {
          margin#{$value}: $i * $step#{$unit};
        }
      }
    }
  }  
}

padding.scss

// _padding.scss
@mixin padding($uid: padding, $unit: px, $step: 10, $from: 0, $through: 3) {
  $base: (
    '': '',
    't': '-top',
    'r': '-right',
    'b': '-bottom',
    'l': '-left',
    'x': ('-left', '-right'),
    'y': ('-top', '-bottom')
  );
  @for $i from $from through $through {
    @each $prop, $value in $base {
      @if length($value) > 1 {        
        .#{$uid}#{$prop}-#{$i} {
          padding#{nth($value, 1)}: $i * $step#{$unit};
          padding#{nth($value, 2)}: $i * $step#{$unit};
        }
      } @else {
        .#{$uid}#{$prop}-#{$i} {
          padding#{$value}: $i * $step#{$unit};
        }
      }
    }
  }  
}