Generated by SassMeister.com.

input.scss

/* shared-stuff.sass */
@mixin sharedStuff {
    :host {
        color: red;
    }
    .mdc-density-5 {
        padding: 5px;
    }
}

/* mdc-button.sass */
@include sharedStuff;
:host {
    background: green;
}
.mdc-thing {
    border: blue;
}

/* ---- GENERATED ---- */


/* shared-stuff.host.sass */
@mixin sharedStuffWitHost {
    &El {
        color: red;
    }
}
/* shared-stuff.non-host.sass */
@mixin sharedStuffWitOther {
    .mdc-density-5 {
        padding: 5px;
    }
}
/* shared-stuff.non-host-scoped.sass */
@mixin sharedStuffWitOtherScoped {
    &mdc-density-5 {
        padding: 5px;
    }
}

/* mwc-button.scoped.sass */
.namespace {
    @include sharedStuffWitHost;
    @include sharedStuffWitOtherScoped;
    &El {
        background: green;
    }
    &mdc-thing {
        border: blue;
    }
}

/* mwc-button.non-scoped.sass */
.namespace {
    @include sharedStuffWitHost;
    &El {
        background: green;
    }
}
@include sharedStuffWitOther;
.mdc-thing {
    border: blue;
}

output.css

/* shared-stuff.sass */
/* mdc-button.sass */
:host {
  color: red;
}

.mdc-density-5 {
  padding: 5px;
}

:host {
  background: green;
}

.mdc-thing {
  border: blue;
}

/* ---- GENERATED ---- */
/* shared-stuff.host.sass */
/* shared-stuff.non-host.sass */
/* shared-stuff.non-host-scoped.sass */
/* mwc-button.scoped.sass */
.namespaceEl {
  color: red;
}
.namespacemdc-density-5 {
  padding: 5px;
}
.namespaceEl {
  background: green;
}
.namespacemdc-thing {
  border: blue;
}

/* mwc-button.non-scoped.sass */
.namespaceEl {
  color: red;
}
.namespaceEl {
  background: green;
}

.mdc-density-5 {
  padding: 5px;
}

.mdc-thing {
  border: blue;
}

settings.json

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