Wie kann ich eine @extend-Direktive in SCSS überschreiben?

Question

Ich habe Schaltflächen in einer Schaltflächengruppe. Schaltflächengruppen haben unterschiedliche Größen, z. button-group-large. Mein Ziel ist es, zu vermeiden, dass die Größe für jede Schaltfläche in einer Schaltflächengruppe explizit festgelegt werden muss, indem die Größe aus der Schaltflächengruppe abgeleitet wird. Das heißt, statt

<div class="button-group-large"> 
    <button class="button-large">Foo</button> 
    <button class="button-large">Bar</button> 
</div> 

Ich würde lieber schreiben:

<div class="button-group-large"> 
    <button>Foo</button> 
    <button>Bar</button> 
</div> 

ich es so machen kann (in SASS):

.button-group-large { 
    button { @extend .button-large; } 
} 

Das funktioniert aber schafft das folgende Problem . Wenn eine meiner Schaltflächen eine spezielle Klasse hat, hat die Klasse .button-large Vorrang. Das heißt, wenn ich

<div class="button-group-large"> 
    <button class="special">Foo</button> 
    <button>Bar</button> 
</div> 

Dann jedes Attribut, das zwischen .special und .button-large erhalten die .button-large Wert anstelle des .special Wert abweicht. Ich möchte, dass dies das Gegenteil ist; .special sollte hier gewinnen. (Als reales Beispiel könnte .special die "primäre" Schaltflächenfarbe festlegen).

Hier ist ein jsfiddle illustriert das Problem: https://jsfiddle.net/wwr63qmv/3/

Als Anhaltspunkt, Bootstrap button groups Vermeiden Sie dieses Problem, indem die Klassen erfordern auf jede Taste individuell eingestellt werden, anstatt auf die Schaltfläche Gruppe. Das ist vielleicht die einzige Antwort. Gibt es eine andere Möglichkeit, um die .special Klasse hier zu gewinnen?

Answer 1

Das Problem, mit dem Sie konfrontiert sind, ist nicht auf Sass oder die @extend Richtlinie zurückzuführen. So funktioniert CSS. Wenn mehrere Selektoren auf dasselbe Element zeigen, gewinnt der spezifischste Selektor (oder), wenn die Spezifität gleich ist, dann gewinnt der letzte in der Datei definierte Selektor.

Der SCSS Code in Ihre Geige wird die unten Ausgang erzeugen, wenn sie zusammengestellt:

.button, ul.button-group li button { /* check this selector */ 
    border: 1px solid black; 
    color: black; 
    border-radius: 2px; 
} 
.special-button { /* and this */ 
    border: 1px solid green; 
    color: green; 
} 
ul.button-group { 
    margin: 10px; 
} 
ul.button-group li { 
    list-style-type: none; 
    display: inline-block; 
    padding: 5px; 
} 
p { 
    font-family: monospace; 
} 

Sowohl diese Selektoren - ul.button-group li button und .special-button die Schaltfläche Ziel, die Klasse als .special-button hat. Die Spezifität des ersten Selektors ist 013 (weil er 1 Klassen- und 3 Typselektoren als Teil des vollständigen Komplexselektors hat), während der Selektor für den zweiten Selektor 010 ist (da er nur einen Klassenselektor hat). Von Natur aus gewinnt also der erste Selektor und nur die unter ihm angegebenen Eigenschaften gelten für das Element.

Damit die .special-button Stile angewendet werden, sollte die Spezifität dieses Selektors erhöht werden. Dies kann einfach durch Ändern des Selektors auf ul.button-group li button.special-button erfolgen, aber es bedeutet, dass der Selektor jetzt nur auf button mit class='special-button' zielt, die innerhalb eines li sind, dessen ul übergeordnete class='button-group' hat. Das macht es sehr spezifisch und bedeutet, dass die Eigenschaften nicht gelten, wenn die button.special-button außerhalb ul.button-group li ist.

Die andere Möglichkeit wäre, die .special-button auch wie unten im li zu verlängern:

ul.button-group { 
    margin: 10px; 
    li { 
    list-style-type: none; 
    display: inline-block; 
    padding: 5px; 
    button { 
     @extend .button; 
     &.special-button { /* note this */ 
     @extend .special-button; 
     } 
    } 
    } 
} 

Fiddle Demo