SCSS Ziel sofortiges Elternteil

Question

Ich habe den folgenden scss-Code, den ich versuche aufzuräumen.

$colors-2: #222; 
$colors-1: #ff0; 

.footer__region { 
    text-align: center; 

    &--country { 
    color: $colors-2; 
    cursor: pointer; 
    display: inline-block; 

    .heading-3 { 
     border-bottom: 2px solid transparent; 

     .active & { 
     border-bottom-color: $colors-1; 
     color: $colors-1; 
     } 
    } 
    } 
} 

Ich dachte, ich könnte die .active innerhalb Nest und fügen Sie den & nach dem folgenden

.footer__region--country.active .heading-3 { 
    border-bottom-color: #ff0; 
    color: #ff0; 
} 

Aber das scheint nicht, wie ich kann, um ausgegeben. Kennt jemand irgendwelche Sass-Methoden, um dies zu tun?

Hinweis: .footer__region--country wird der Artikel sein, der .active beigefügt hat und .heading-3 wird das Kind sein.

Answer 1

Glücklicherweise können Sie für Ihr Beispiel die @at-root Direktive verwenden und die Tatsache, dass .a.b{} dasselbe auswählt wie .b.a{}. Auf diese Weise müssen Sie keinen Klassennamen wiederholen.

$colors-2: #222; 
$colors-1: #ff0; 

.footer__region { 
    text-align: center; 

    &--country { 
    color: $colors-2; 
    cursor: pointer; 
    display: inline-block; 

    .heading-3 { 
     border-bottom: 2px solid transparent; 

     @at-root .active#{&} { 
     border-bottom-color: $colors-1; 
     color: $colors-1; 
     } 
    } 
    } 
} 

Ausgang:

.footer__region { 
    text-align: center; 
} 
.footer__region--country { 
    color: #222; 
    cursor: pointer; 
    display: inline-block; 
} 
.footer__region--country .heading-3 { 
    border-bottom: 2px solid transparent; 
} 
.active.footer__region--country .heading-3 { 
    border-bottom-color: #ff0; 
    color: #ff0; 
}