Как работать с БЭМ и Sass в случае со вложенными элементами?

Question

[photosho]

Как подружить БЭМ и Sass в случае со вложенными элементами и необходимостью стилизовать по псевдоклассу (например, hover)? Вот пример ситуации:

<div class="block">
  <div class="block__element-1">
    <div class="block__element-2">
    </div>
  </div>
</div>

.block {
  &__element-2 {
    ...
  }
  
  &__element-1 {
    ...
    &:hover {
        /* Стили element-2 */
    }
  }
}

Получается, внутри стилей "hover" нужно писать имя класса полностью: ".block__element-2", и при повышении вложенности ситуация усугубляется. Если изменится имя блока, то его нужно будет менять во всех таких местах.

Answer 1

[Сергей delphinpro]

.block {
  &__element-2 {}
  &__element-1 {}
  &__element-1:hover &__element-2 {}
}

.block {
  $this: &;
  &__element-2 {}
  &__element-1 {
    &:hover #{$this}__element-2 {}
  }
}

и при повышении вложенности ситуация усугубляется

Не нужно увеличивать вложенность. Это противоречит идеологии БЭМ.

Answer 2

[iBird Rose]

& можно засунуть в переменную. пример https://codepen.io/colinlord/pen/KozWWP/

Comments

[photosho]

Спасибо, наверно, с переменной - самый понятный вариант.