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

<         


        

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.