Skip to content

Instantly share code, notes, and snippets.

@jakob-e
Last active January 24, 2021 10:59
Show Gist options
  • Save jakob-e/ec64fad44d0ae380ccb26453444a270a to your computer and use it in GitHub Desktop.
Save jakob-e/ec64fad44d0ae380ccb26453444a270a to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----------------------------------------
$trace-list: ();
@mixin trace($name){
$trace-list: append($trace-list, $name, comma) !global;
@content;
$trace-list: nth-remove($trace-list, -1) !global;
}
@function nth-remove($list, $n){
$r: ();$n: if($n < 0, length($list) + $n + 1, $n); $b: is-bracketed($list); $s: list-separator($list);
@for $i from 1 through length($list){ @if $i != $n { $r: append($r, nth($list, $i)); }}
@return join((), $r, $s, $b);
}
// ----------------------------------------
@mixin button {
@include trace(button){
button {
mixin-context: $trace-list;
}
}
}
@mixin card {
@include trace(card){
.card {
@include button;
}
}
}
@mixin collection {
@include trace(collection){
.collection {
@include card;
}
}
}
@mixin sign-up {
@include trace(sign-up){
.sign-up {
@include button;
}
}
}
@mixin log-in {
@include trace(log-in){
.log-in {
@include button;
}
}
}
@mixin modal {
@include trace(modal){
.modal {
@include log-in;
}
}
}
@mixin sidebar {
@include trace(sidebar){
.sidebar {
@include collection;
@include button;
}
}
}
@include button;
@include log-in;
@include card;
@include collection;
@include sign-up;
@include sidebar;
@include modal;
<div>Lorem</div>
button {
mixin-context: button;
}
.log-in button {
mixin-context: log-in, button;
}
.card button {
mixin-context: card, button;
}
.collection .card button {
mixin-context: collection, card, button;
}
.sign-up button {
mixin-context: sign-up, button;
}
.sidebar .collection .card button {
mixin-context: sidebar, collection, card, button;
}
.sidebar button {
mixin-context: sidebar, button;
}
.modal .log-in button {
mixin-context: modal, log-in, button;
}
{
"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