outside.scss

// 원본 링크 : https://pantaley.com/blog/Add-class-to-the-most-outer-selector-using-Sass-mixin/

@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 {
  .child {
    span {
      @include most-outer-selector('.bold') {
        font-weight: bold;
      }
    }
  }
}
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<!-- example 1 -->
<div class="parent">
  <div class="child"><span>Hello World<span></div>
</div>

<!-- example 2 -->
<div class="parent bold">
  <div class="child"><span>Hello World<span></div>
</div>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

.parent class의 bold가 있으면 font-weight bold
most-outer-selector가 선언된 최상위의 & 클래스 구분.