css - 带 SASS 和 :hover 的 BEM

Question

使用 BEM 和 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#interpolation_

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

替代方式：

在第三级使用变量而不是＆符号。

关联

萨斯：

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

   &:hover {

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

CSS：

.card__overlay {
  display: none;
}

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