Generated by SassMeister.com.

input.scss

  $small  : 48em;
  $medium : 56.25em;
  $large  : 1600px;


@mixin respond-to($breakpoint: $medium) {
        @media (min-width: $breakpoint) {
            @content;
        }
}

.image-test {
  background-image: url(../../images/logan-480.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  height: 100vh;
  width: 100vw;

  @include respond-to() {
    background-image: url('../../images/logan-900.jpg')
  }
}

output.css

.image-test {
  background-image: url(../../images/logan-480.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100vw;
}
@media (min-width: 56.25em) {
  .image-test {
    background-image: url("../../images/logan-900.jpg");
  }
}

settings.json

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