SCSS + BEM style children structure when parent has modificator

Question

Please is possible to set scss for element inside --rounded ? I do not wanna use .box__something, but I need to modify children that is depend on parent modifier

<div class="box">
    <div class="box__something">Hello</div>
</div>
<div class="box box--rounded">
    <div class="box__something">Hi</div>
</div>

.box {
    &__something {
        background: blue;
    }
    &--rounded {
        background: green;

        .box__something { // <<< Is some better selector?
            background: pink;
        }
    }
}

Answer 1

Sass doesn't have any great built-in solutions to solve your issue, this is a problem that has been explored many times. You can however acheive the result you are after in a slightly un-elegant manner by using the & helper to join the classes that you wish to join. I have included a live example here.

While this does work, you must realise that if you want to style the .box--rounded class directly you must have it inside it's own class as illustrated below, you cannot use it with the trailing & class that we have placed &__something on.

I recommend you play around with my sassmeister gist and see what results you can come up with.

.box {
    &__something {
      background: blue;
    }
    &--rounded {
      background: green;
    }
    &--rounded & {
      &__something {
        background: pink;
    }
  }
}

I hope this has solved your issue.