Generated by SassMeister.com.

input.scss

@mixin generator($prefix, $properties) {
  // List of sizes to generate for each variant
  //$sizes: [.25, .5, 1, 1.5, 3];
  $sizes: [ 1, 3];
  
  // Loop through all of the sizes
  // use @for to access the current index
  @for $i from 1 through length($sizes) {
    $size: nth($sizes, $i);
    
    // Create the rule
    .#{$prefix}-#{$i} {
        @each $property in $properties {
            #{$property}: 1rem * $size;
        }
    }
  }
}

@mixin generator2($prefix, $properties, $sizes) {
  @each $suffix, $size in $sizes {
    // Create the rule
    .#{$prefix}-#{$suffix} {
        @each $property in $properties {
            #{$property}: $size;
        }
    }
  }
}

@include generator('mleft', [margin-left]);
@include generator(mr, [margin-right]);
// @include generator(mt, [margin-top]);
// @include generator(mb, [margin-bottom]);
// @include generator(my, [margin-top, margin-bottom]);
// @include generator(mx, [margin-left, margin-right]);


// @include generator(pl, [padding-left]);
// @include generator(pr, [padding-right]);
// @include generator(pt, [padding-top]);
// @include generator(pb, [padding-bottom]);
// @include generator(py, [padding-top, padding-bottom]);
// @include generator(px, [padding-left, padding-right]);

$grid-breakpoints: (
  sm: 576px,
  md: 768px
);

$breakpoint-sizes: (
  1: 0.25rem,
  2: 0.5rem,
  3: 1rem,
  4: 2rem,
  5: 3rem
);

@each $infix, $break-point in $grid-breakpoints {
    @media (min-width: $break-point) {
    @include generator2('ml-#{$infix}', [margin-left], $breakpoint-sizes);
}
}

output.css

.mleft-1 {
  margin-left: 1rem;
}

.mleft-2 {
  margin-left: 3rem;
}

.mr-1 {
  margin-right: 1rem;
}

.mr-2 {
  margin-right: 3rem;
}

@media (min-width: 576px) {
  .ml-sm-1 {
    margin-left: 0.25rem;
  }

  .ml-sm-2 {
    margin-left: 0.5rem;
  }

  .ml-sm-3 {
    margin-left: 1rem;
  }

  .ml-sm-4 {
    margin-left: 2rem;
  }

  .ml-sm-5 {
    margin-left: 3rem;
  }
}
@media (min-width: 768px) {
  .ml-md-1 {
    margin-left: 0.25rem;
  }

  .ml-md-2 {
    margin-left: 0.5rem;
  }

  .ml-md-3 {
    margin-left: 1rem;
  }

  .ml-md-4 {
    margin-left: 2rem;
  }

  .ml-md-5 {
    margin-left: 3rem;
  }
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}