SCSS + BEM style children structure when parent ha

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.

Answer 2

The modifier should be used not on the parent, and the child element .box__something

Answer 3

If I understand your problem correctly, I feel your pain! As soon as you nest a nested property & changes to the parent.

You can however cache the original class name as a variable like this:

$box: box;

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

        .#{$box}__something { // <<< Is some better selector?
            background: pink;
        }
    }
}

The only problem with the method above is that you end up with a larger volume of compiled CSS. This renders to:

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

To reduce the size of the output you could combine & with the variable method like so:

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

        #{$box}__something {
            background: pink;
        }
    }
}

This renders to:

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

That way you can change the class name in the variable and everything gets updated, I also think it reads a bit better.