Generated by SassMeister.com.

input.scss

.danger {
    background: red;
    &.text {
        background: lime;
        font-style: italic;
        color: white;
    }
}

.text {
    background: blue;
}

markup.html

<div class="danger">
    HELLO
    <span class="text">BLA</span>    
</div>

<div class="danger text">
    BERP
    <span class="text">DOH</span>    
</div>

output.css

.danger {
  background: red;
}
.danger.text {
  background: lime;
  font-style: italic;
  color: white;
}

.text {
  background: blue;
}

settings.json

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