Generated by SassMeister.com.

input.scss

$bp-small: 600px;
$bp-medium: 720px;
$bp-large: 1440px;

@mixin mq($bp: $bp-medium, $bp-direction: min-width) {
    @media all and ($bp-direction: $bp) {
        @content;
    }
}

.topbar {
    color: orange;
    @include mq($bp-large, max-width) {
        color: red;
    }
    
    &__logo {
        width: 100px;
        @include mq {
            width: 120px;
        }
    }
}

output.css

.topbar {
  color: orange;
}
@media all and (max-width: 1440px) {
  .topbar {
    color: red;
  }
}
.topbar__logo {
  width: 100px;
}
@media all and (min-width: 720px) {
  .topbar__logo {
    width: 120px;
  }
}

settings.json

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