Zwei Sass `@ extend`s Konflikt

Question

ich diese Zeilen als Teil meiner Navigation sass haben, hier vereinfacht:

// These lines (66-72) should generate what I want. 

.top-nav .nav { 
    & > ul { 
    a { 
     @extend %section-button; 
    } 
    } 
} 

// These lines (76-82) prevent the previous code from generating what I want. 
// Delete it to see things work. 

.nav { 
    & > ul { 
    a { 
     @extend %section-button; 
    } 
    } 
} 

Wenn Zeilen 76-82 gelöscht werden, Zeilen 66-72 erzeugen .top-nav .nav > ul a:hover, die dunkle Anwendung graue Farbe zum Text bei Hover. Wenn die Zeilen 76-82 jedoch bleiben dürfen, wird der Selektor .top-nav .nav > ul a:hover nicht generiert. Warum ist das?

Das Ändern der Reihenfolge der Auswahlblöcke hilft nicht.

Ich brauche beide Blöcke, weil im .nav Selektor Block ich Dinge in %section-button überschreiben, die ich in .top-nav .nav nicht überschrieben werden soll.

Here's the code in a pen, simplified as much as possible while still demonstrating the problem.

Voll Code:

HTML:

<div class="top-nav"> 
    <nav id="nav" class="nav"> 
    <ul> 
     <li class="page-link"> <a href="/live">Live</a></li> 
    </ul> 
    </nav> 
</div> 

SCSS:

// Colors 
$grey-color-dark: #3f3f3d; 
$grey-color-light: lighten($grey-color-dark, 65%); 
$blue: #23527c; 
$green: #2d5a3a; 

// Section Colors 

%section-background-color { 
    background: $grey-color-dark; 
} 

%section-text-color { 
    color: $grey-color-dark; 
} 

// Buttons 

%button { 
    cursor:pointer; 
    padding:0 1rem; 
    line-height: 2rem; 
    height: 2rem; 
    display:inline-block; 
} 

%section-button { 
    @extend %button; 
    @extend %section-background-color; 
    color:$grey-color-light; 

    &:hover, &:focus { 
    background: $grey-color-light; 
    @extend %section-text-color; 
    } 
} 

// navigation 

// These lines (66-72) should generate what I want. 

.top-nav .nav { 
    & > ul { 
    a { 
     @extend %section-button; 
    } 
    } 
} 

// These lines (76-82) prevent the previous code from generating what I want. Delete it to see things work. 

.nav { 
    & > ul { 
    a { 
     @extend %section-button; 
    } 
    } 
} 

Answer 1

Sie @extends verwenden, wenn Sie einen mixin verwenden möchte. @extends ist entworfen, um Gruppen von Klassen zu erstellen (und es wird in eine Instanz kompilieren), so dass Aufruf sowohl .top-nav .nav als auch .nav eine CSS-Gruppierung erstellen, die beide Klassen kombiniert und zu anderen Unhandlichkeit führt. Während die Verwendung eines Mixins zwei verschiedene Instanzen des section-button in den nav und top-nav definiert.

Wenn Sie %section-button zu @mixin section-button und die @extend %section-button Anrufe zu @include section-button ändern, sollte alles funktionieren.

Wenn Sie Platzhalter verwenden, müssen Sie mehrere Platzhalter erstellen. Aber ich denke, dass diese Art der Verwendung eines Platzhalters vereitelt. Oder wenn Sie sich keine Gedanken über das Duplizieren von Code machen, können Sie einfach das gewünschte CSS in der .top-nav Klasse mit einem verschachtelten :hover, &:focus Pseudoselektor definieren, egal welche Farbe Sie haben möchten.