Bem with SASS and: Hover

SASS with BEM hover state

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

SCSS target class before :hover - I had same issue

BEM nesting elements and hover effects

You can simply this selector by doing the following:

.list {
  &__item:hover .list__link {
    color: $secondary;
  }
}

How do I apply :hover to multiple bem statements in sass?

This will work:

:hover.magic-sparkles {
    &-red {
        background: red;
    }

    &-blue {
        background: blue;
    }

    &-green {
        background: green;
    }
}

CSS transition on hover using BEM and Sass

Try something like this instead:

.price__tooltip {
    transition: all 0.2s ease-in;
    opacity: 0;
    [...]
}
.price__text:hover {
      &+.price__tooltip{
        opacity: 1;
      }
}

}

With this, the sibling .price__tooltip should get his opacity to 1 when .price__text is in hover state.

Sass with BEM, inherit selector

If you insist on nesting everything, the best you can do is this:

.photo-of-the-day {
    $root: &;
    &--title{
        font-size: 16px;
    }
    &:hover{
        #{$root}--title {
            text-decoration: underline;
        }
    }
}