Sass @mixin und @include
Die @mixin-Direktive ermöglicht es uns, einen Stil zu definieren, der im gesamten Stylesheet wiederverwendet werden kann.
Die @include-Direktive kann ein Mixin in das Dokument einfügen.
Definieren eines Mixins
Ein Mixin wird mit der @mixin-Direktive definiert. @mixin name { property: value; property: value; ... }Das folgende Beispiel erstellt ein Mixin namens "important-text":
Sass-Code:
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
Hinweis:In Sass sind der Bindestrich - und der Unterstrich _ identisch, was bedeutet, dass @mixin important-text { } und @mixin important_text { } dasselbe Mixin sind.
Verwenden eines Mixins
Die @include-Direktive kann verwendet werden, um ein Mixin einzubinden:
Sass @include Mixin-Syntax:
@include mixin-name;
}
Der Code zum Einbinden des important-text-Mixins lautet daher wie folgt:
Beispiel
@include important-text;
background-color: green;
}
Konvertieren Sie den obigen Code in CSS-Code, wie unten gezeigt:
CSS-Code:
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
background-color: green;
}
Ein Mixin kann auch andere Mixins einbinden, wie unten gezeigt:
Beispiel
@include important-text;
@include link;
@include special-border;
}
Variablen an ein Mixin übergeben
Mixins können Parameter akzeptieren.
Wir können Variablen an ein Mixin übergeben.
Definieren Sie ein Mixin, das Parameter akzeptieren kann:
Beispiel
@mixin bordered($color, $width) {
border: $width solid $color;
}
.myArticle {
@include bordered(blue, 1px); // Mixin aufrufen und zwei Parameter übergeben
}
.myNotes {
@include bordered(red, 2px); // Mixin aufrufen und zwei Parameter übergeben
}
Die Mixin-Parameter im obigen Beispiel sind Eigenschaften zum Festlegen des Rahmens (Farbe und Breite).
Konvertieren Sie den obigen Code in CSS-Code, wie unten gezeigt:
CSS-Code:
border: 1px solid blue;
}
.myNotes {
border: 2px solid red;
}
Mixin-Parameter können auch Standardwerte definieren, wobei die Syntax wie folgt lautet:
Beispiel
border: $width solid $color;
}
Beim Einbinden eines Mixins musst du nur die gewünschten Variablennamen und ihre Werte übergeben:
Beispiel
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
Konvertieren Sie den obigen Code in CSS-Code, wie unten gezeigt:
CSS-Code:
border-color: blue;
border-width: 1in;
border-style: dashed; }
h1 {
border-color: blue;
border-width: 2in;
border-style: dashed;
}
Variable Argumente
Manchmal, wenn du nicht bestimmen kannst, wie viele Parameter ein Mixin oder eine Funktion verwenden wird, kannst du...verwenden, um variable Argumente festzulegen.
Zum Beispiel kann ein Mixin, das zum Erstellen von box-shadow verwendet wird, eine beliebige Anzahl von box-shadow-Werten als Parameter annehmen.
Beispiel
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
Konvertieren Sie den obigen Code in CSS-Code, wie unten gezeigt:
CSS-Code:
-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}
Mixins für Browser-Präfixe verwenden
Die Verwendung von Mixins für Browser-Präfixe ist ebenfalls sehr praktisch, wie im folgenden Beispiel:
Beispiel
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.myBox {
@include transform(rotate(20deg));
}
Konvertieren Sie den obigen Code in CSS-Code, wie unten gezeigt:
CSS-Code:
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}