@mixin media-query($media) {
  @if $media == lg {
    @media only screen and (max-width: $screen-lg-max) {
      @content;
    }
  }
  @else if $media == md {
    @media only screen and (max-width: $screen-md-max) {
      @content;
    }
  }
  @else if $media == sm {
    @media only screen and (max-width: $screen-sm-max) {
      @content;
    }
  }
  @else if $media == xs {
    @media only screen and (max-width: $screen-xs-max) {
      @content;
    }
  }
}

// lets go
html {
  body {
    .test {
        background: black;
        width: 500px;
        @include media-query(lg) { // lg, md, sm, xs
          width: 400px;
        }
        @include media-query(md) { // lg, md, sm, xs
          width: 300px;
        }
        @include media-query(sm) { // lg, md, sm, xs
          width: 200px;
        }
        @include media-query(xs) { // lg, md, sm, xs
          width: 100px;
        }
    }
  }
}