Generated by SassMeister.com.

input.scss

.foo {
    color: red;
}

.foo.__bar {
    color: blue;
}

.baz {
    color: green;
}

.foo2 {
    color: red;
}

.foo2--bar {
    color: blue;
}

.baz2 {
    color: green;
}

markup.html

<ul>
    <li class="foo">lorem ipsum</li>
    <li class="foo __bar">lorem ipsum</li>
    <li class="foo __bar baz">lorem ipsum</li>
</ul>

<ul>
    <li class="foo2">lorem ipsum</li>
    <li class="foo2--bar">lorem ipsum</li>
    <li class="foo2 foo2--bar baz2">lorem ipsum</li>
</ul>

output.css

.foo {
  color: red;
}

.foo.__bar {
  color: blue;
}

.baz {
  color: green;
}

.foo2 {
  color: red;
}

.foo2--bar {
  color: blue;
}

.baz2 {
  color: green;
}

settings.json

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