css - 带有 SASS 和 :hover 的 BEM

Question

使用带 SASS 的 BEM 声明事件/焦点/悬停状态的正确方法是什么？例如，我有这样的结构:

<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 {
   }
}

我想在悬停在 block 上时修改元素。这不起作用:

.card {
   &__overlay {
       display: none;
   }

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

并且只为这个实例编写整个 .project__image 似乎是错误的。

还有其他方法可以实现吗？

Answer 1

您可以使用 Sass ampersand selector 获得所需的结果, 不使用变量或插值。

Referencing parent selectors by using the ampersand (&) can be a powerful tool, if used right. There are simple uses of this feature as well as some very complex uses of this feature.

例如:

.card { 

    &__overlay {
        display:none;
    }

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

结果:

.card__overlay {
    display: none;
}

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

此代码使用较少的语言结构(例如，不使用变量或插值)，因此可以说是一个更清晰的实现。