Sass: как получить родительский селектор при наведении

Question

Шаги для воспроизведения:

.root {
    .parent {
        color: red;

        &:hover & {
            &__child {
                background-color: blue;
            }
        }
    }
}

Что на самом деле происходит:

.root .parent {
  color: red;
}

.root .parent:hover .root .parent__child {
    background-color: blue;
}

Что ожидается ：

.root .parent {
  color: red;
}

.root .parent:hover .parent__child {
    background-color: blue;
}

Итак, & в &:hover больше не является родительским селектором. Как я могу получить родительский селектор?

Answer 1

& предназначен для объединения селекторов вместе при вложении, поэтому он необходим только для hover. Вам не нужны дополнительные &

Попробуйте:

/* hover concatenated to 'parent' and the 'parent__child' is nested to hover */
.root {
    .parent {
        color: red;

        &:hover {
            .parent__child{
                background-color: blue;
            }
        }
    }
}