Generated by SassMeister.com.

input.scss

$breakpoints: (xs: 350px, sm: 450px, med: 800px, lg: 1200px, xl: 1800px);
$displayValues: none, inline, inline-block, block, grid, table, table-cell, table-row, flex, inline-flex;

@each $size, $val in $breakpoints {
    @each $d in $displayValues {
        @media (max-width: $val) {
            .display-#{$size}-#{$d} {
                display: #{$d};
            }
        }
    }
}

output.css

@media (max-width: 350px) {
  .display-xs-none {
    display: none;
  }
}
@media (max-width: 350px) {
  .display-xs-inline {
    display: inline;
  }
}
@media (max-width: 350px) {
  .display-xs-inline-block {
    display: inline-block;
  }
}
@media (max-width: 350px) {
  .display-xs-block {
    display: block;
  }
}
@media (max-width: 350px) {
  .display-xs-grid {
    display: grid;
  }
}
@media (max-width: 350px) {
  .display-xs-table {
    display: table;
  }
}
@media (max-width: 350px) {
  .display-xs-table-cell {
    display: table-cell;
  }
}
@media (max-width: 350px) {
  .display-xs-table-row {
    display: table-row;
  }
}
@media (max-width: 350px) {
  .display-xs-flex {
    display: flex;
  }
}
@media (max-width: 350px) {
  .display-xs-inline-flex {
    display: inline-flex;
  }
}
@media (max-width: 450px) {
  .display-sm-none {
    display: none;
  }
}
@media (max-width: 450px) {
  .display-sm-inline {
    display: inline;
  }
}
@media (max-width: 450px) {
  .display-sm-inline-block {
    display: inline-block;
  }
}
@media (max-width: 450px) {
  .display-sm-block {
    display: block;
  }
}
@media (max-width: 450px) {
  .display-sm-grid {
    display: grid;
  }
}
@media (max-width: 450px) {
  .display-sm-table {
    display: table;
  }
}
@media (max-width: 450px) {
  .display-sm-table-cell {
    display: table-cell;
  }
}
@media (max-width: 450px) {
  .display-sm-table-row {
    display: table-row;
  }
}
@media (max-width: 450px) {
  .display-sm-flex {
    display: flex;
  }
}
@media (max-width: 450px) {
  .display-sm-inline-flex {
    display: inline-flex;
  }
}
@media (max-width: 800px) {
  .display-med-none {
    display: none;
  }
}
@media (max-width: 800px) {
  .display-med-inline {
    display: inline;
  }
}
@media (max-width: 800px) {
  .display-med-inline-block {
    display: inline-block;
  }
}
@media (max-width: 800px) {
  .display-med-block {
    display: block;
  }
}
@media (max-width: 800px) {
  .display-med-grid {
    display: grid;
  }
}
@media (max-width: 800px) {
  .display-med-table {
    display: table;
  }
}
@media (max-width: 800px) {
  .display-med-table-cell {
    display: table-cell;
  }
}
@media (max-width: 800px) {
  .display-med-table-row {
    display: table-row;
  }
}
@media (max-width: 800px) {
  .display-med-flex {
    display: flex;
  }
}
@media (max-width: 800px) {
  .display-med-inline-flex {
    display: inline-flex;
  }
}
@media (max-width: 1200px) {
  .display-lg-none {
    display: none;
  }
}
@media (max-width: 1200px) {
  .display-lg-inline {
    display: inline;
  }
}
@media (max-width: 1200px) {
  .display-lg-inline-block {
    display: inline-block;
  }
}
@media (max-width: 1200px) {
  .display-lg-block {
    display: block;
  }
}
@media (max-width: 1200px) {
  .display-lg-grid {
    display: grid;
  }
}
@media (max-width: 1200px) {
  .display-lg-table {
    display: table;
  }
}
@media (max-width: 1200px) {
  .display-lg-table-cell {
    display: table-cell;
  }
}
@media (max-width: 1200px) {
  .display-lg-table-row {
    display: table-row;
  }
}
@media (max-width: 1200px) {
  .display-lg-flex {
    display: flex;
  }
}
@media (max-width: 1200px) {
  .display-lg-inline-flex {
    display: inline-flex;
  }
}
@media (max-width: 1800px) {
  .display-xl-none {
    display: none;
  }
}
@media (max-width: 1800px) {
  .display-xl-inline {
    display: inline;
  }
}
@media (max-width: 1800px) {
  .display-xl-inline-block {
    display: inline-block;
  }
}
@media (max-width: 1800px) {
  .display-xl-block {
    display: block;
  }
}
@media (max-width: 1800px) {
  .display-xl-grid {
    display: grid;
  }
}
@media (max-width: 1800px) {
  .display-xl-table {
    display: table;
  }
}
@media (max-width: 1800px) {
  .display-xl-table-cell {
    display: table-cell;
  }
}
@media (max-width: 1800px) {
  .display-xl-table-row {
    display: table-row;
  }
}
@media (max-width: 1800px) {
  .display-xl-flex {
    display: flex;
  }
}
@media (max-width: 1800px) {
  .display-xl-inline-flex {
    display: inline-flex;
  }
}

settings.json

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