带 SASS 和 :hover 的 BEM

Posted 2023-02-23

【中文标题】带 SASS 和 :hover 的 BEM

【英文标题】：BEM with SASS and :hover

【发布时间】：2016-03-05 11:09:09

【问题描述】：

使用 BEM 和 SASS 声明活动/焦点/悬停状态的正确方法是什么？例如，我有这样的结构：

<div class="card">
    <img class="card__image" src="..." >
    <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 似乎是错误的。

有没有其他方法可以做到这一点？

【问题讨论】：

这里的问题究竟是什么？如果您查看编译结果，答案似乎很明显。如果您仍然不明白 CSS 出了什么问题，请尝试通过验证器运行结果。

它有效。检查this。

这是第二个代码部分不起作用，而不是第一个。具有悬停状态的那个。

“不起作用”并没有说明问题所在。 importblogkit.com/2015/07/does-not-work

对不起。它不起作用，因为它编译为 .card:hover__overlay 而不是所需的 .card:hover .card__overlay。

【参考方案1】：

阅读有关插值的更多信息： 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 post，但通过这种方式，您不需要重复类名。变量$root为你做：）

【讨论】：

不幸的是 Gonzales PE 版本：3.0.0-28 似乎不喜欢这种语法：S

这感觉像是一种反模式

【参考方案2】：

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

使用与号 (&) 引用父选择器可以是 强大的工具，如果使用得当。此功能的简单用途如下 以及此功能的一些非常复杂的用途。

例如：

.card  

    &__overlay 
        display:none;
    

    &:hover & 
        &__overlay  
            display: block;
           
    

结果：

.card__overlay 
    display: none;


.card:hover .card__overlay 
    display: block;

此代码使用较少的语言结构（例如，不使用变量或插值），因此可以说是更简洁的实现。

【讨论】：

不知道为什么我从来没想过这个，真是天才。但是，如果您还需要对 card:hover 应用样式怎么办？

哇，这太棒了！

如果它嵌套在任何其他父级中，这将不起作用（它变成 .parent .card .parent .card__overlay）

【参考方案3】：

另一种方式：

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

Link

SASS：

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

   &:hover 

       .#$className__overlay 
           display: block;
       
   

CSS：

.card__overlay 
  display: none;


.card:hover .card__overlay 
  display: block;