Generated by SassMeister.com.

input.scss

$breakpoints: (
  'sm': 30rem,
  'md': 52rem,
  'lg': 68rem,
  'xl': 84rem
);


@mixin loop-mq {
    @content('');
  @each $key, $value in $breakpoints {
    @media (min-width: #{$value}) {
      @content (\@#{$key});
    }
  }
}

@include loop-mq using ($key) {
  .large#{$key} {
    font-size: 128px;
    height: 56px;

  }

  .medium#{$key} {
    font-size: 16px;
    height: 48px;

  }

  .small#{$key} {
    font-size: 14px;
    height: 40px;
  }
}

output.css

.large {
  font-size: 128px;
  height: 56px;
}

.medium {
  font-size: 16px;
  height: 48px;
}

.small {
  font-size: 14px;
  height: 40px;
}

@media (min-width: 30rem) {
  .large\@sm {
    font-size: 128px;
    height: 56px;
  }

  .medium\@sm {
    font-size: 16px;
    height: 48px;
  }

  .small\@sm {
    font-size: 14px;
    height: 40px;
  }
}
@media (min-width: 52rem) {
  .large\@md {
    font-size: 128px;
    height: 56px;
  }

  .medium\@md {
    font-size: 16px;
    height: 48px;
  }

  .small\@md {
    font-size: 14px;
    height: 40px;
  }
}
@media (min-width: 68rem) {
  .large\@lg {
    font-size: 128px;
    height: 56px;
  }

  .medium\@lg {
    font-size: 16px;
    height: 48px;
  }

  .small\@lg {
    font-size: 14px;
    height: 40px;
  }
}
@media (min-width: 84rem) {
  .large\@xl {
    font-size: 128px;
    height: 56px;
  }

  .medium\@xl {
    font-size: 16px;
    height: 48px;
  }

  .small\@xl {
    font-size: 14px;
    height: 40px;
  }
}

settings.json

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