Generated by SassMeister.com.

input.scss

$breakpoints: (
  xs: 0em,
  sm: 37em,
  md: 64em,
  lg: 90em
);

.cool {
    .stuff {
        @media only screen and (min-width: map-get($breakpoints, sm)) {
            max-width: 480px;
    
            &--stacked {
              width: 480px;
            }
        }
    
    
        @media only screen and (max-width: map-get($breakpoints, sm)) {
            max-width: 100%;
          }
        }
}
}

output.css

@media only screen and (min-width: 37em) {
  .cool .stuff {
    max-width: 480px;
  }
  .cool .stuff--stacked {
    width: 480px;
  }
}
@media only screen and (max-width: 37em) {
  .cool .stuff {
    max-width: 100%;
  }
}

settings.json

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