Skip to content

Instantly share code, notes, and snippets.

@kevinpschaaf
Created October 22, 2021 01:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save kevinpschaaf/359ea9646af4113042879a1c3203ee16 to your computer and use it in GitHub Desktop.
Save kevinpschaaf/359ea9646af4113042879a1c3203ee16 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
/* 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;
}
/* === ALTERNATE === */
@mixin sharedStuff($host) {
#{$host} {
color: red;
}
.mdc-density-5 {
padding: 5px;
}
}
/* mdc-button.sass */
$host: 'El';
@include sharedStuff($host);
#{$host} {
background: green;
}
.mdc-thing {
border: blue;
}
/* 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;
}
/* === ALTERNATE === */
/* mdc-button.sass */
El {
color: red;
}
.mdc-density-5 {
padding: 5px;
}
El {
background: green;
}
.mdc-thing {
border: blue;
}
{
"sass": {
"compiler": "dart-sass/1.32.12",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment