Add class to the most outer selector using Sass mixin | pantaley.com

PHOTO EMBED

Sun May 15 2022 12:19:12 GMT+0000 (UTC)

Saved by @wnakswl #scss

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

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