БЭМ с SASS и:hover

Question

Как правильно объявлять активные / фокусирующие / парящие состояния, используя БЭМ с SASS? Например, у меня есть такая структура:

<div class="card">
    <img class="card__image" src="..." alt="">
    <div class="card__overlay">
        <div class="card__title"></div>
    </div>
</div>    

И SCSS:

.card {
   &__image {
   }

   &__overlay {
   }

   &__title {
   }
}

И я хочу изменить элементы при наведении на блок. Это не работает:

.card {
   &__overlay {
       display: none;
   }

   &:hover {
       &__overlay {
           display: block;
       }
   }
}

И писать весь .project__image только для этого один случай кажется неправильным.

Есть ли другой способ сделать это?

Answer 1

Вы можете достичь желаемого результата с помощью селектора амперсанд Sass, без использования переменных или интерполяции.

Ссылка на родительские селекторы с помощью амперсанда (&) может быть мощным инструментом, если используется правильно. Существуют простые способы использования этой функции, а также некоторые очень сложные варианты использования этой функции.

Например:

.card { 

    &__overlay {
        display:none;
    }

    &:hover & {
        &__overlay  {
            display: block;
        }   
    }
}

Результаты в:

.card__overlay {
    display: none;
}

.card:hover .card__overlay {
    display: block;
}

Этот код использует меньше языковых конструкций (например, без использования переменных или интерполяции) и поэтому, возможно, является более чистой реализацией.

Answer 2

Узнайте больше об интерполяции: http://sass-lang.com/documentation/file.SASS_REFERENCE.html

SCSS:

.card {
    $root: &;

    &__overlay {
        display: none;

        #{$root}:hover & {
            display: block;
        }
    }
}

РЕЗУЛЬТАТ:

.card__overlay {
  display: none;
}

.card:hover .card__overlay {
  display: block;
}

PS. Это похоже на сообщение @alireza safian, но таким образом вам не нужно дублировать имя класса. переменная $root сделай это для себя:)

Answer 3

Альтернативный способ:

Используйте переменную вместо амперсанда для третьего уровня.

Ссылка на сайт

SASS:

$className: card;
.card {
   &__overlay {
       display: none;
   }

   &:hover {

       .#{$className}__overlay {
           display: block;
       }
   }
}

CSS:

.card__overlay {
  display: none;
}

.card:hover .card__overlay {
  display: block;
}