(SCSS) Nesting with at-root

Use @at-root to extend your styles.

.Foo {
  color: green;

  &.Foo {
    &_bar {
      color: blue;
    }

    &_baz {
      color: red;
    }
  }

  &.is-stuff &_primary {
    color: green;
  }

  @at-root {
    %secret-foo {
      color: black;
    }
  }

  &-mod {
    @extend %secret-foo;

    color: yellow;
  }

  &-mod2 {
    @extend %secret-foo;

    color: orange;
  }
}