-2
    .card {
      &__header {}

      &__title {}

      &__content {}

      &__hasFullImage {

        &:hover {
          &__header {}

          //I want something like this
          .card__header {}

          //and not to type the parent class
        }
      }
    }

So Im facing a situation where I'm using BEM with SASS, and for me the whole point of this is I can grab my SCSS file to other project change the name of the parent class to whatever I want and will work. But in this situation on Hover I can't reach the .card__header without using &__header, so If I change the parent class I will need to change the class on hover aswell. Because the output will be .card__hasFullImage .card__hasFullImage__header and what I want is .card__hasFullImage .card__header. Is there any way to do this without typing the parent class?

Dejan.S
  • 18,571
  • 22
  • 69
  • 112
Joao Bairrada
  • 93
  • 1
  • 2
  • 8

1 Answers1

1
.card {
  $this: &;
  
 &__hasFullImage {
   &:hover {
      #{$this}__header {}
    }
}

SCSS target class before :hover - I had same issue

Marko
  • 349
  • 2
  • 14