Skip to content

Instantly share code, notes, and snippets.

@jakob-e
Created January 20, 2021 16:37
Show Gist options
  • Save jakob-e/4874abed78d7b5bf9bf5eaa665bb4873 to your computer and use it in GitHub Desktop.
Save jakob-e/4874abed78d7b5bf9bf5eaa665bb4873 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
$once: ();
@mixin once($key){
@if not index($once, $key){
$once: append($once, $key) !global;
@content;
}
}
@mixin theme-red {
[theme-red] {
@include once(theme-red){
color: red;
}
}
@if & {
&[theme-red]{
@content(red);
}
}
}
@mixin component() {
.component {
@include theme-red using($color) {
border-bottom: 2px solid $color;
}
}
}
/*
Without "using" this will throw an error
0 arguments allowed 1 were passed
@mixin component {
.component {
@include theme-red {
border-bottom: 2px solid $color;
}
}
}
*/
@include theme-red;
@include component;
/*
Without "using" this will throw an error
0 arguments allowed 1 were passed
@mixin component {
.component {
@include theme-red {
border-bottom: 2px solid $color;
}
}
}
*/
[theme-red] {
color: red;
}
.component[theme-red] {
border-bottom: 2px solid red;
}
{
"sass": {
"compiler": "dart-sass/1.26.11",
"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