Hauptmenü

Untermenü

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-transformuppercase;
}
h2 {
    @extend h1;
}

Daraus wird ein


h1h2 {
  text-transformuppercase;
}

3. Die Möglichkeiten

... kann man in dem pisseligen Beispiel oben natürlich nicht so wirklich erkennen. Aber was ist hiermit?


.box {
  border1px solid #000;
  border-radius5px;
  background#fff;
  font-size1.2em;
  font-weightbold;
}
.error {
  @extend .box;
  border-color#f00;
}
.success {
  @extend .box;
  border-color#00f;
}
/* wird zu */
.box, .error, .success {
  border1px solid #000;
  border-radius5px;
  background#fff;
  font-size1.2em;
  font-weightbold;
}
.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-transformuppercase;
        color#ccc;
        font-weightnormal;        
    }
}
h2 {
    @extend h1;
    font-size1.2em;
}
h3 {
    @extend h1;
    font-size1.1em;
}
/* wird zu */
.hint h1, .hint h2, .hint h3 {
  text-transformuppercase;
  color#ccc;
  font-weightnormal;  
}
h2 {
  font-size1.2em;
}
h3 {
  font-size1.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