Skip to content

Instantly share code, notes, and snippets.

@francisrupert francisrupert/DEPTH.scss
Last active Sep 18, 2019

Embed
What would you like to do?
SCSS Mixin: reveal dom depth
@mixin DEPTH($rootBG:true) {
html body & {
@if $rootBG {
background-color: rgba(0,0,0,.08);
}
}
html body & * { background-color: rgba(255,0,0,.08) ; }
html body & * * { background-color: rgba(0,255,0,.08) ; }
html body & * * * { background-color: rgba(0,0,255,.08) ; }
html body & * * * * { background-color: rgba(255,0,255,.08); }
html body & * * * * * { background-color: rgba(0,255,255,.08); }
html body & * * * * * * { background-color: rgba(255,255,0,.08); }
html body & * * * * * * * { background-color: rgba(255,0,0,.08) ; }
html body & * * * * * * * * { background-color: rgba(0,255,0,.08) ; }
html body & * * * * * * * * * { background-color: rgba(0,0,255,.08) ; }
}
.foo {
// root gets bg
@include DEPTH;
}
.bar {
// root does *NOT* get bg
@include DEPTH(false);
}
.DEPTH {
// root gets bg
@include DEPTH;
// root does *NOT* get bg
&--NO-ROOT {
@include DEPTH(false);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.