Mixins und Includes

Ein Mixin in Sass ist ein wiederverwendbarer Block von CSS-Deklarationen. Anders als eine gewöhnliche Klasse kann er Parameter annehmen und ist dadurch flexibler als Copy-and-paste. Definieren Sie ihn mit @mixin und verwenden Sie ihn mit @include.

Ein Mixin ohne Parameter ist einfach ein wiederverwendbarer Block:

Übergeben Sie einem Mixin Werte, um seine Ausgabe anzupassen:

Legen Sie Standardwerte für Mixin-Argumente fest, damit diese optional sind:

Übergeben Sie Mixin-Argumente zur besseren Verständlichkeit anhand ihres Namens:

Mixins können mithilfe von @content einen Inhaltsblock annehmen. Der eingefügte Block wird dort eingesetzt, wo @content erscheint:

Ein häufig verwendetes Mixin für Media Queries:

Ein Mixin für Textstile und eine konsistente typografische Skala:

Mixins geben CSS-Deklarationen aus, Funktionen geben einen Wert zurück. Verwenden Sie ein Mixin, wenn Sie mehrere CSS-Regeln ausgeben möchten, und eine Funktion, wenn Sie einen einzelnen berechneten Wert benötigen.

Zu viele Mixins erzeugen eine abstrakte Indirektion, die schwer zu debuggen ist. Erstellen Sie ein Mixin nur, wenn ein Muster mindestens dreimal wiederverwendet wird. Für einmalige Stile schreiben Sie das CSS einfach direkt.

Welche Aufgabe hat @content in der Definition eines Sass-Mixins?

Definieren Sie Mixins mit @mixin und verwenden Sie sie mit @include. Mixins akzeptieren Parameter mit optionalen Standardwerten. @content ermöglicht es Aufrufern, CSS-Blöcke in das Mixin einzufügen, und unterstützt dadurch Wrapper-Muster wie Hilfsfunktionen für Media Queries. Erstellen Sie Mixins nur für Muster, die mehrfach wiederverwendet werden, um zusätzlichen Abstraktionsaufwand zu vermeiden.