Probleme mit der Verschachtelung in Sass [Duplikat] - css, sass

Ich weiß, dass Sie einen Elternselektor wie folgt hinzufügen können:

.main-selector {
.parent-selector & {

}
}

Ich versuche herauszufinden, ob es einen Weg gibt, zurück zum .main-Selector zu gehen, damit ich einem Kindelement einen Hover-State-Stil hinzufügen kann.

.main-selector {
.child-selector {
*styles*
.main-selector:hover & {
*hover styles*
}
}
}

Antworten:

Die korrekte Syntax wäre:

.main-selector {
.child-selector {
*styles*
}
&:hover {
*hover styles*
}
}

Dies wird einen Hover für Ihre erstellen main-selector. Man könnte es auch anders herum tun, so:

.main-selector {
&:hover {
*hover styles*
}
.child-selector {
*styles*
}
}