Как мне применить: hover к нескольким операторам bem в sass?

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>

СКС:

.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

Да, вы можете применить один и тот же эффект при наведении на все элементы