SCSS - Erweiterung
1. Das Prinzip
SCSS bietet die Möglichkeit, zentrale Definitionen an andere Selektoren zu "vererben". Gut, eine Vererbung im eigentlichen Sinn ist es nicht, sondern mehr eine Zusammenfassung.
Denn manchmal möchte man bestimmten Selektoren gemeinsame Anweisungen geben, plus ein paar Unterschiede. Bei der Erweiterung geht es also um eine Art von gemeinsamer Schnittmenge.
2. @extend
Mit dieser Anweisung kann man CSS-Anweisungen teilen. Ein ganz einfaches Beispiel.
h1 {
text-transform: uppercase;
}
h2 {
@extend h1;
}
Daraus wird ein
h1, h2 {
text-transform: uppercase;
}
3. Die Möglichkeiten
... kann man in dem pisseligen Beispiel oben natürlich nicht so wirklich erkennen. Aber was ist hiermit?
.box {
border: 1px solid #000;
border-radius: 5px;
background: #fff;
font-size: 1.2em;
font-weight: bold;
}
.error {
@extend .box;
border-color: #f00;
}
.success {
@extend .box;
border-color: #00f;
}
/* wird zu */
.box, .error, .success {
border: 1px solid #000;
border-radius: 5px;
background: #fff;
font-size: 1.2em;
font-weight: bold;
}
.error {
border-color: #f00;
}
.success {
border-color: #00f;
}
Klingelt es?
Zunächst wurde eine "Standardbox" (.box) definiert. Mit @extend erweitert man dann die Selektoren .error beziehungsweise .success
um deren Anweisungen und überschreibt eine davon. Praktisch, gelle?
Wichtig
Bei diesem Beispiel müsst ihr vor allem auf die Reihenfolge achten. Denn SCSS arbeitet den Code von oben nach unten ab. Ständen jetzt zum Beispiel .error
und .success vor .box, so würde Ergebnis ähnlich aussehen. Bis auf die Tatsache, dass das Überschreiben der Rahmenfarbe nicht mehr funktioniert.
4. Noch mehr Möglichkeiten
Diesmal ohne Kommentar. Schaut euch einfach in Ruhe das Ergebnis an.
.hint {
h1 {
text-transform: uppercase;
color: #ccc;
font-weight: normal;
}
}
h2 {
@extend h1;
font-size: 1.2em;
}
h3 {
@extend h1;
font-size: 1.1em;
}
/* wird zu */
.hint h1, .hint h2, .hint h3 {
text-transform: uppercase;
color: #ccc;
font-weight: normal;
}
h2 {
font-size: 1.2em;
}
h3 {
font-size: 1.1em;
}
5. Ein Tipp
@extend bietet wahnsinnig viele Varianten, seinen SCSS-Code aufzubauen. Mein Rat, spielt mal mit unterschiedlichsten Möglichkeiten herum, dann werdet
ihr sicher selbst schnell merken, wo die Fallstricke lauern, was überhaupt nicht geht und was eine richtig tolle Sache ist.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt