Media Screen with Generated by SassMeister.com.

media_screen.css

@media only screen and (max-width: 767px) {
  .hidden-xs-only {
    display: none !important;
  }
}
@media only screen and (min-width: 768px) {
  .hidden-sm-and-up {
    display: none !important;
  }
}
@media only screen and (max-width: 991px) {
  .hidden-sm-only {
    display: none !important;
  }
}
@media only screen and (max-width: 991px) {
  .hidden-sm-and-down {
    display: none !important;
  }
}
@media only screen and (min-width: 992px) {
  .hidden-md-and-up {
    display: none !important;
  }
}
@media only screen and (max-width: 1199px) {
  .hidden-md-only {
    display: none !important;
  }
}
@media only screen and (max-width: 1199px) {
  .hidden-md-and-down {
    display: none !important;
  }
}
@media only screen and (min-width: 1200px) {
  .hidden-lg-and-up {
    display: none !important;
  }
}
@media only screen and (max-width: 1919px) {
  .hidden-lg-only {
    display: none !important;
  }
}
@media only screen and (max-width: 1919px) {
  .hidden-lg-and-down {
    display: none !important;
  }
}
@media only screen and (min-width: 1920px) {
  .hidden-xl-only {
    display: none !important;
  }
}

media_screen.scss

$--sm: 768px !default;
$--md: 992px !default;
$--lg: 1200px !default;
$--xl: 1920px !default;

$--breakpoints: (
  'xs' : (max-width: $--sm - 1),
  'sm' : (min-width: $--sm),
  'md' : (min-width: $--md),
  'lg' : (min-width: $--lg),
  'xl' : (min-width: $--xl)
);


$--breakpoints-spec: (
  'xs-only': (max-width: $--sm - 1),
  'sm-and-up': (min-width: $--sm),
  'sm-only': (min-width: #{$--sm}) and (max-width: #{$--md - 1}),
  'sm-and-down': (max-width: $--md - 1),
  'md-and-up': (min-width: $--md),
  'md-only': (min-width: #{$--md}) and (max-width: #{$--lg - 1}),
  'md-and-down': (max-width: $--lg - 1),
  'lg-and-up': (min-width: $--lg),
  'lg-only': (min-width: #{$--lg}) and (max-width: #{$--xl - 1}),
  'lg-and-down': (max-width: $--xl - 1),
  'xl-only': (min-width: $--xl),
);


@mixin res($key, $map: $--breakpoints) {
  // 循环断点Map，如果存在则返回
  @if map-has-key($map, $key) {
    @media only screen and #{inspect(map-get($map, $key))} {
      @content;
    }
  } @else {
    @warn "Undefeined points: `#{$map}`";
  }
}

.hidden {
  @each $break-point-name, $value in $--breakpoints-spec {
    &-#{$break-point-name} {
      @include res($break-point-name, $--breakpoints-spec) {
        display: none !important;
      }
    }
  }
}

settings.json

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