@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;
}
}
}
}