Sass @mixin und @include

Sass Mixin

@mixin Anweisungen ermöglichen es Ihnen, wiederverwendbaren CSS-Code für die gesamte Website zu erstellen.

erstellen @include Anweisungen definiert, um Ihnen zu ermöglichen, Mixins (Verweise) zu verwenden.

definiert

Mixin werden mit @mixin definiert durch Anweisungen.

Sass @mixin Syntax:

@mixin name {
  property: value;
  property: value;
  ...
}

Das folgende Beispiel erstellt einen Mixin mit dem Namen "important-text":

SCSS-Syntax:

@mixin important-text {
  color: rot;
  font-size: 25px;
  font-weight: fett;
  border: 1px fest blau;
}

Hinweis:

Hinweis zu Bindestrichen und Unterstrichen in Sass: Bindestriche und Unterstriche werden als gleich betrachtet.

das bedeutet @mixin important-text { } und @mixin important_text { } wird als gleicher Mixin betrachtet!

Verwendung von Mixins

@include Anweisung zum Verweisen auf Mixins.

Sass @include Mixin-Syntax:

selector {
  @include mixin-name;
}

Daher, um den oben erstellten important-text-Mixin zu verwenden:

SCSS-Syntax:

.danger {
  @include important-text;
  background-color: grün;
}

Der Sass-Übersetzer wird den obigen Code in reguläres CSS umwandeln:

CSS-Ausgabe:

.danger {
  color: rot;
  font-size: 25px;
  font-weight: fett;
  border: 1px fest blau;
  background-color: grün;
}

Mixins können auch andere Mixins enthalten:

SCSS-Syntax:

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
}

Variablen an Mixin übergeben

Mixins akzeptieren Parameter. Auf diese Weise können Variablen an Mixins übergeben werden.

Hier ist die Methode zur Definition eines Mixins mit Parametern:

SCSS-Syntax:

/* Definition eines Mixins mit zwei Parametern */
@mixin bordered($color, $width) {
  border: $width fest $color;
}
.myArticle {
  @include bordered(blue, 1px);  // Aufruf eines Mixins mit zwei Werten
}
.myNotes {
  @include bordered(red, 2px); // Aufruf eines Mixins mit zwei Werten
}

Bitte beachten Sie, dass die Parameter als Variablen gesetzt und dann als Wert der Border-Eigenschaft (Farbe und Breite) verwendet werden.

Nach der Kompilierung wird das CSS wie folgt aussehen:

CSS-Ausgabe:

.myArticle {
  border: 1px fest blau;
}
.myNotes {
  border: 2px fest rot;
}

Standardwerte von Mixins

Auch können Standardwerte für Mixin-Variable definiert werden:

SCSS-Syntax:

@mixin bordered($color: blue, $width: 1px) {
  border: $width fest $color;
}

Dann müssen Sie nur den Wert angeben, der beim Verwenden des Mixins geändert werden soll:

SCSS-Syntax:

.myTips {
  @include bordered($color: orange);
}

Die Verwendung von Mixins als Vendor-Prefix

Eine weitere hervorragende Anwendung von Mixins ist die (Browser)-Vendor-Prefix-Nutzung.

Dies ist ein Beispiel für eine Transformation:

SCSS-Syntax:

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.myBox {
  @include transform(rotate(20deg));
}

Nach der Kompilierung wird das CSS wie folgt aussehen:

CSS-Syntax:

.myBox {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}