Generated by SassMeister.com.

input.scss

$breakpoints: (
  md: 576px,
  lg: 1024px,
  xl: 1200px
) !default;

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

@mixin bp-modifiers($breakpoints: $breakpoints, $prefix: '.-', $display: block) {
    display: none;

    @each $bp, $arg in $breakpoints {
        @include at($bp) {
            &.-\@#{nth($bp, 1)} {
                display: $display;
            }
        }
    }
}

.foo {
    color: blue;
    @include bp-modifiers;
}

output.css

.foo {
  color: blue;
  display: none;
}
@media screen and (min-width: 576px) {
  .foo.-\@md {
    display: block;
  }
}
@media screen and (min-width: 1024px) {
  .foo.-\@lg {
    display: block;
  }
}
@media screen and (min-width: 1200px) {
  .foo.-\@xl {
    display: block;
  }
}

settings.json

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