@mixin most-outer-selector($new-class) { $current-selector: &; $new-selector: []; @each $item in $current-selector { $first-item: nth($item, 1); $appended-item: $first-item + $new-class; $new-item: set-nth($item, 1, $appended-item); $new-selector: append($new-item, $new-selector); } @at-root #{$new-selector} { @content; } } .parent { // some CSS rules .child { // some CSS rules span { // some CSS rules @include most-outer-selector('.bold') { font-weight: bold; } } } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter