如何将 :hover 应用于 sass 中的多个 bem 语句？

Question

我有这个：

.magic-sparkles {

    &-red {
        background: red;
    }

    &-blue {
        background: blue;
    }

    &-green {
        background: green;
    }
}

但是我想改变它，让它只在悬停时有效。

最终编译结果为：

.magic-sparkles-red:hover { background: red;}
.magic-sparkles-blue:hover { background: blue;}
.magic-sparkles-green:hover { background: green;}

将第一行更改为 .magic-sparkles:hover { 不起作用。我需要简单地将 :hover 添加到每个嵌套项，还是有办法同时将其应用于所有嵌套项？

Answer 1

html:

<div class="parent"></div>
<div class="parent red"></div>
<div class="parent blue"></div>
<div class="parent green"></div>

scss:

.parent{
  width: 50px;
  height: 50px;
  background-color: black;
  &.red{
    background-color: red;
  }
  &.blue{
    background-color: blue;
  }
  &.green{
    background-color: green;
  }
  &:hover{
    background-color: yellow;
  }
}

[我做了一个笔，你怎么能做到这一点][1]

[1]: https://codepen.io/anon/pen/RmdzWE

是的，您可以对所有元素应用相同的悬停效果

Answer 2

这会起作用：

:hover.magic-sparkles {
    &-red {
        background: red;
    }

    &-blue {
        background: blue;
    }

    &-green {
        background: green;
    }
}

如何将 :hover 应用于 sass 中的多个 bem 语句？

How do I apply :hover to multiple bem statements in sass?

css

sass

bem