Sass @mixin und @include
- Vorherige Seite Sass @import
- Nächste Seite Sass @extend
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); }
- Vorherige Seite Sass @import
- Nächste Seite Sass @extend