x-and-y-mixin.scss

// Utilities : Paddings, Margins
$spaces: (0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20);
$sides: (top, right, bottom, left);

// Bootstrap utility classes:
// p-0: [padding: 0rem]
// ml-0: [margin-left: 0rem]

// pl-1 : [ padding-left: 0.25rem ]
// mr-2 : [ margin-right: 0.5rem ]
// pt-3 : [ padding-top: 0.75rem ]
// mb-4 : [ margin-bottom: 1rem ]

// pl-5 : [ padding-left: 1.25rem ]
// mr-6 : [ margin-right: 1.5rem ]
// pt-7 : [ padding-top: 1.75rem ]
// mb-8 : [ margin-bottom: 2rem ]

@each $space in $spaces {
  .m-#{$space} {
    margin: #{$space/4}rem;
  }
  .mx-#{$space} {
    margin-left: #{$space/4}rem;
    margin-right: #{$space/4}rem;
  }
  .my-#{$space} {
    margin-top: #{$space/4}rem;
    margin-bottom: #{$space/4}rem;
  }
  .p-#{$space} {
    padding: #{$space/4}rem;
  }
  .px-#{$space} {
    padding-left: #{$space/4}rem;
    padding-right: #{$space/4}rem;
  }
  .py-#{$space} {
    padding-top: #{$space/4}rem;
    padding-bottom: #{$space/4}rem;
  }
  @each $side in $sides {
    .m#{str-slice($side, 0, 1)}-#{$space} {
      margin-#{$side}: #{$space/4}rem !important;
    }
    .p#{str-slice($side, 0, 1)}-#{$space} {
      padding-#{$side}: #{$space/4}rem !important;
    }
  }
}

Thanks , it's awesome... Now I can make this type of mixin too🎉👍