Generated by SassMeister.com.

input.scss

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

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

@include loop-mq using($key){
  .display-inline#{$key} {
    display: inline;
  }
  .display-block#{$key} {
    display: block;
  }
}    
}

output.css

.button .display-inline {
  display: inline;
}
.button .display-block {
  display: block;
}
@media (min-width: 30rem) {
  .button .display-inline\@sm {
    display: inline;
  }
  .button .display-block\@sm {
    display: block;
  }
}
@media (min-width: 52rem) {
  .button .display-inline\@md {
    display: inline;
  }
  .button .display-block\@md {
    display: block;
  }
}
@media (min-width: 68rem) {
  .button .display-inline\@lg {
    display: inline;
  }
  .button .display-block\@lg {
    display: block;
  }
}
@media (min-width: 84rem) {
  .button .display-inline\@xl {
    display: inline;
  }
  .button .display-block\@xl {
    display: block;
  }
}

settings.json

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