Wie wird auf SCSS-Geschwister Bezug genommen?

Question

Unter der Annahme, dass ich die folgenden HTML habe:

<div class="navigation__item"> 
    <span class="navigation__item__icon"></span> 
</div> 

ich einige Regeln auf ein Symbol anwenden mag, wenn schwebt ein Element, das mit dem folgende CSS beschrieben werden kann:

.navigation__item__icon { 
    color: black; 
} 

.navigation__item:hover .navigation__item__icon { 
    color: white; 
} 

ich kann erreichen diese mit dem folgenden SCSS:

.navigation__item { 
    &:hover { 
    .navigation__item__icon { <-- here 
     color: white; 
    } 
    } 

    &__icon { 
    color: black; 
    } 
} 

Hier ist es eine Möglichkeit, das Schreiben navigation__item zu vermeiden? Etwas wie "Elternregel \ Element". Ich mag Sass für logische Struktur, so dass, wenn ich den ganzen navigation Block mit Elementen umbenennen möchte, ich einfach navigation Klassenname im Stamm ändern kann, und alles umbenannt wird. Dieser Fall bricht diesen Vorteil.

Update: Eigentlich habe ich einen Weg gefunden, dies ohne Verwendung von geschweiften Klammern zu tun. & kann als einmal wiederholt mehr werden:

.navigation__item { 
    &:hover &__icon { 
    color: white; 
    } 

    &__icon { 
    color: black; 
    } 
} 

Es ist großartig, aber es macht nicht viel Sinn machen, wenn ich für &:hover selbst viele Regeln und Regeln. Die Frage ist noch offen - ist es möglich, auf die Geschwisterelementdefinition innerhalb des {} Blocks zuzugreifen.

Answer 1

In Stylus gibt es eine Partial reference, aber ich weiß nichts Ähnliches in SASS. Eine Lösung könnte eine Variable für den übergeordneten Selektor werden:

.navigation__item { 
    $selector: &; 
    &:hover { 
    #{$selector}__icon { 
     color: white; 
    } 
    } 

    &__icon { 
    color: black; 
    } 
} 

nützlich ist, die Sie navigation__item Klasse für eine andere ändern.

EDIT: Ich hatte ein falsches Beispiel verwendet, es ist jetzt OK.