@mixin und @include in sass | Erklärt

Syntaktisch Fantastisches Stylesheet (SASS) ist beliebt, um den Benutzern dazu zu erleichtern. Auf diese Weise erhöht SASS die Möglichkeit der grundlegenden CSS -Sprache. Eine solche Möglichkeit, einen wiederverwendbaren CSS -Code mit SASS mit SASS zu schreiben. Um mehr über diese Regeln zu erfahren, folgen Sie dem folgenden Artikel.

Sass @mixin und @include Regeln

Mit der @Mixin -Regel in Sass können Sie einen wiederverwendbaren CSS -Code erstellen. Dieser wiederverwendbare Code besteht aus entscheid. Dieser Code wird als Mixin bezeichnet. Um ein Mixin in Ihrem Code zu verwenden, bietet Sass die @Include -Regel an.

Hier führen wir Sie bei der Erstellung und Verwendung eines Mixin.

Wie man einen Mixin definiert

Verwenden Sie zur Definition eines Mixins die @Mixin -Direktive und gruppieren Sie Ihre überflüssigen und wiederverwendbaren CSS -Stile zusammen.

Syntax der @mixin -Regel

@mixin mixin-name
Eigentumswert;
Eigentumswert;

Nachdem Sie die @Mixin -Anweisung verwendet haben, müssen Sie diesen bestimmten Mixin benennen und dann CSS -Eigenschaften in diesen Block schreiben, und ein Mixin wird erfolgreich erstellt. Hier ist ein Beispiel für ein Mixin.

@mixin Header
Hintergrundfarbe: Grün;
Schriftgröße: 30px;
Schriftdicke: fett;

Voila, ein Mixin für einen Kopfball wurde erstellt! Jedes Mal, wenn Sie Ihren Header stylen müssen. Aber wie man diesen Mixin benutzt? Nun, wie oben erwähnt mit der @include -Regel, die ein Mixin verwendet werden kann.

Syntax der @include -Regel

Selektor
@include mixin-name;

Auf diese Weise können Sie bei Bedarf ein Mixin in Ihren Code aufnehmen. Lassen Sie uns beispielsweise das oben erstellte Header -Mixin einschließen.

.Header
@Include Header;

Wenn die SASS -Datei transpiliert wird, gibt der obige Code die folgende resultierende CSS -Ausgabedatei an.

.Header
Hintergrundfarbe: Grün;
Schriftgröße: 30px;
Schriftdicke: fett;

Ein weiterer Vorteil dieser @Include -Regel besteht darin, dass Sie mehrere Mixins zusammenfügen können. Zum Beispiel haben wir unten drei Mixins in einen anderen Mixin aufgenommen.

@mixin mixin1
@include mixin2;
@include mixin3;
@include mixin4;

Auf diese Weise können Sie mehrere Mixins zusammen verwenden.

Bis jetzt haben wir Mixins gelernt, ohne Argumente zu verabschieden. Im nächsten Abschnitt werden wir sehen, wie Sie Argumente an einen Mixin übergeben können.

Wie man Argumente an einen Mixin übergibt

Das Übergeben von Argumenten, die sich mischen, erweist sich als nützlich, wenn Sie einen ähnlichen Satz von CSS -Eigenschaften miteinander gruppieren möchten. Die an diese Eigenschaften übergebenen Werte können jedoch unterschiedlich sein. So können Sie ein Mixin definieren, indem Sie ein Argument vorgeben.

@mixin border ($ color, $ width)
Grenze: $ width gepunktet $ color;

.Container
@include Border (rosa, 2px);

.Kasten
@include Border (lila, 3px);

Im obigen Code -Snippet haben wir einen Mixin namens Grenze erstellt und zwei Argumente bestanden. Wenn wir diesen Mixin beim Stylen anderer Elemente verwenden, haben wir die @Include -Regel verwendet. In jedem Fall unterscheiden sich die Werte, die an den Grenzmischung übergeben wurden. Hier werden die übergebenen Argumente als Variablen festgelegt.

Eine andere Sache, die Sie mit Mixins machen können, ist, dass Sie den Argumenten, die an die Mixins übergeben wurden, Standardwerte zuweisen können.

@mixin border ($ width: 2px, $ color: pink)
Grenze: $ width gepunktet $ color;

Wenn Sie die Standardwerte beibehalten möchten, liegt es jedoch an Ihnen. Wenn Sie einen bestimmten Wert ändern möchten.

.Container
@include Border ($ width: 3px);

Die am Rand des Selektors angewendete Farbe ist die gleiche wie im Standardwert definiert.

Abschluss

Mit der @Mixin -Regel in SASS können Sie einen wiederverwendbaren CSS -Code erstellen, der als Mixin bezeichnet wird, in dem Sie redundante CSS -Eigenschaften und -Werte gruppieren können, die bei Bedarf überall in Ihrem Code verwendet werden können. In der Zwischenzeit wird die @include -Regel verwendet, um einen Mixin in Ihren Code hinzuzufügen. Sie können auch Argumente an ein Mixin weitergeben, wenn Sie einen ähnlichen Satz von CSS -Eigenschaften mit unterschiedlichen Werten zusammenfassen möchten. Dies und vieles mehr über die @mixin und @include -Regel wurde in diesem Artikel für Sie zusammengestellt.