Generated by SassMeister.com.

input.scss

@mixin at($bp, $rule: min-width) {
    @if map-has-key($breakpoints, $bp) {
        $bp: map-get($breakpoints, $bp);
    }
    @media screen and (#{$rule}: $bp) {
        @content;
    }
}

@mixin at-each($map...) {
    @each $bp, $arg in $map {
        @if $arg {
            @include at($bp) {
                @content($arg);
            }
        } @else {
            @content($bp);
        }
    }
}


$breakpoints: (
  md: 616px,
  md-1: 865px,
  lg: 1000px,
  xl: 1288px,
);

.heading {
    @include at-each(2rem, md 2.25rem, lg 2.5rem, xl 3rem) using ($size) {
        font-size: $size;
    }
}

output.css

.heading {
  font-size: 2rem;
}
@media screen and (min-width: 616px) {
  .heading {
    font-size: 2.25rem;
  }
}
@media screen and (min-width: 1000px) {
  .heading {
    font-size: 2.5rem;
  }
}
@media screen and (min-width: 1288px) {
  .heading {
    font-size: 3rem;
  }
}

settings.json

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