如何将 :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

这将起作用：

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

    &-blue {
        background: blue;
    }

    &-green {
        background: green;
    }
}

Answer 2

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

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