Sass: `@mixin` vs. `@extend` – Wann welches verwenden?

Sass bietet zwei primäre Mechanismen zur Wiederverwendung von CSS-Regeln und zur Vermeidung von Code-Duplikaten (DRY-Prinzip): @mixin und @extend. Obwohl beide das gleiche Ziel verfolgen, arbeiten sie unter der Haube völlig unterschiedlich und haben dramatisch unterschiedliche Auswirkungen auf die Struktur und Größe des kompilierten CSS-Codes.

Diese Anleitung stellt beide Direktiven gegenüber und gibt Empfehlungen für deren Einsatz in der Praxis.

1. @mixin (Der Code-Generator)

Ein @mixin verhält sich wie eine Vorlage oder Funktion. Wenn Sie ein Mixin mit @include in eine CSS-Regel einfügen, kopiert der Sass-Compiler die im Mixin definierten Deklarationen direkt in den Selektor.

Beispiel

// Definition eines Mixins (kann Argumente annehmen)
@mixin flex-center($direction: row) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}

// Verwendung
.card {
  @include flex-center(column);
  background: white;
}

.profile {
  @include flex-center; /* Verwendet den Standardwert 'row' */
}

Kompiliertes CSS

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: white;
}

.profile {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

Auswirkung: Der CSS-Code im Mixin wird für jeden Aufruf dupliziert.

2. @extend (Der Selektor-Gruppierer)

Mit @extend teilen Sie Sass mit, dass ein Selektor die Stile eines anderen Selektors erben soll. Anstatt den Code zu duplizieren, gruppiert der Compiler die Selektoren im finalen CSS, indem er sie mit einem Komma trennt.

Es wird dringend empfohlen, @extend nur mit Placeholder-Selektoren (%name) zu verwenden. Diese werden im finalen CSS nicht ausgegeben, es sei denn, sie werden erweitert.

Beispiel

// Definition eines Placeholders (wird nicht kompiliert, wenn ungenutzt)
%button-base {
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: bold;
}

// Verwendung
.btn-primary {
  @extend %button-base;
  background-color: blue;
}

.btn-secondary {
  @extend %button-base;
  background-color: gray;
}

Kompiliertes CSS

.btn-primary, .btn-secondary {
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: bold;
}

.btn-primary {
  background-color: blue;
}

.btn-secondary {
  background-color: gray;
}

Auswirkung: Keine Code-Duplikation, stattdessen werden die Selektoren gruppiert.

Vor- und Nachteile im Vergleich

@mixin

• Vorteile:
  • Sehr flexibel durch die Unterstützung von Argumenten und Standardwerten.
  • Funktioniert problemlos innerhalb von Media-Queries (@media).
• Nachteile:
  • Führt zu einer größeren Dateigröße des kompilierten CSS, da Code dupliziert wird. (Dies ist in der Praxis durch Gzip-Kompression auf dem Webserver jedoch meist vernachlässigbar).

@extend

• Vorteile:
  • Reduziert die Dateigröße des unkomprimierten CSS durch die Vermeidung von Code-Duplikaten.
  • Spiegelt echte objektorientierte Vererbung wider.
• Nachteile:
  • Keine Argumente: Kann keine dynamischen Werte verarbeiten.
  • Gefahr von "Selektor-Explosion": Unbedachter Einsatz kann zu riesigen, unlesbaren und ineffizienten Selektorketten im CSS führen.
  • Einschränkung bei Media-Queries: Ein Selektor außerhalb einer @media-Query kann kein Element innerhalb einer @media-Query erweitern (und umgekehrt). Dies führt zu Compiler-Fehlern.

Fazit & Empfehlung

• Verwenden Sie @mixin als Standardwerkzeug. Die Möglichkeit, Argumente zu übergeben, macht es extrem flexibel. Machen Sie sich keine Sorgen über die Code-Duplikation – Gzip auf dem Webserver komprimiert wiederkehrende Code-Muster hocheffizient.
• Verwenden Sie @extend (nur mit % Placeholders) sehr gezielt. Es ist ideal für statische, unveränderliche CSS-Muster (z.B. die Basis-Stile für verschiedene Arten von Alerts oder Buttons), solange diese nicht innerhalb von unterschiedlichen Media-Queries verwendet werden müssen.