Wie ist die Reihenfolge der Vorrang vor CSS? ⇐ CSS

[Anonymous]

Ich versuche herauszufinden, warum eine meiner CSS-Klassen die andere (und nicht umgekehrt) zu überschreiben scheint?

Code: Select all

.smallbox {
background-color: white;
height: 75px;
width: 150px;
font-size:20px;
box-shadow: 0 0 10px #ccc;
font-family: inherit;
}

.smallbox-paysummary {
@extend .smallbox;
font-size:10px;
}
< /code>
Und in meiner Ansicht nehme ich an: < /p>

Die Schriftart (das überlappende Element) wird als 10px anstelle von 20px angezeigt - könnte jemand erklären, warum dies der Fall ist?