Best way to write a subcomponent of a modified selector in BEM/SCSS

Question

I want a nice elegant way in SCSS to write BEM subcomponents without being verbose, and modify them using the parent class.

.container.container--red .container__title {
}

I tried this, but it didn't work:

.container {
   &.container--red {
      &__title {
      }
   }  
}

But this doesn't work because it assumes the selector I need is .container--red__title

score 1 · Answer 1 · answered Nov 24 '15 at 14:55

1

scss:

.container {
    $root: &;

    &--red {
        #{$root}__title {
            color: red;
        }
    }  
}

output:

.container--red .container__title {
    color: red;
}

answered Nov 24 '15 at 14:55

mwl

score 0 · Answer 2 · answered Aug 18 '16 at 14:59

Isn't this what you would want to use?

.container { &--red {} &__title {} }

Compiling to

.container {} .container--red {} .container__title {}

Don't forget that hierarchy still counts in sass because you need to think about the compilation output.

2 Answers2