带 SASS 和 :hover 的 BEM答案

【问题标题】：BEM with SASS and :hover带 SASS 和 :hover 的 BEM
【发布时间】：2016-03-05 11:09:09
【问题描述】：

使用 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 似乎是错误的。

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

【问题讨论】：

这里的问题究竟是什么？如果您查看编译结果，答案似乎很明显。如果您仍然不明白 CSS 出了什么问题，请尝试通过验证器运行结果。
它有效。检查this。
这是第二个代码部分不起作用，而不是第一个。具有悬停状态的那个。
“不起作用”并没有说明问题所在。 importblogkit.com/2015/07/does-not-work
对不起。它不起作用，因为它编译为 .card:hover__overlay 而不是所需的 .card:hover .card__overlay。

标签： css sass bem

【解决方案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;
}

【讨论】：