sass
Mixins

Syntax

• @mixin mixin-name ($argument1, $argument, ...){ ... }

Erstellen und verwenden Sie ein Mixin

Um ein Mixin zu erstellen, verwenden Sie die @mixin Direktive.

@mixin default-box ($color, $borderColor) {
    color: $color;
    border: 1px solid $borderColor;
    clear: both;
    display: block;
    margin: 5px 0;
    padding: 5px 10px;
}

Sie können eine Liste von Argumenten in einer Klammer hinter dem Namen des Mixins angeben. Denken Sie daran, Ihre Variablen mit $ und sie durch Kommas zu trennen.

Um das Mixin in einem anderen Selektor zu verwenden, verwenden Sie die @include Direktive.

footer, header{ @include default-box (#ddd, #ccc); }

Die Stile aus dem Mixin werden nun in der footer und in der header , mit dem Wert #ccc für die Variable $color und #ddd für die Variable $borderColor .

Mischen mit variablen Argumenten

Es gibt einige Fälle in Mixins, in denen es bei der Verwendung einzelne oder mehrere Argumente geben kann. Nehmen wir einen border-radius bei dem es ein einzelnes Argument wie den border-radius:4px; oder mehrere Argumente wie border-radius:4px 3px 2px 1px; .

Das traditionelle Mischen mit Keyword-Argumenten erfolgt wie folgt: -

@mixin radius($rad1, $rad2, $rad3, $rad4){
 -webkit-border-radius: $rad1 $rad2 $rad3 $rad4;
 -moz-border-radius: $rad1 $rad2 $rad3 $rad4;
 -ms-border-radius: $rad1 $rad2 $rad3 $rad4;
 -o-border-radius: $rad1 $rad2 $rad3 $rad4;
 border-radius: $rad1 $rad2 $rad3 $rad4;
}

Und als verwendet

.foo{
    @include radius(2px, 3px, 5px, 6px)
}

Das obige Beispiel ist komplex (zum Codieren, Lesen und Verwalten). Wenn Sie nicht nur einen oder zwei Werte übergeben können, wird ein Fehler ausgegeben. Um einen, zwei oder einen anderen Wert zu verwenden , müssen Sie drei andere Mixins definieren.

Durch die Verwendung der Variablen Argument müssen Sie sich keine Gedanken darüber machen, wie viele Argumente Sie übergeben können. Variablenargumente können durch Definition eines Variablennamens gefolgt von drei Punkten (...) deklariert werden. Im Folgenden finden Sie ein Beispiel für ein Variablenargument.

@mixin radius($radius...)
{  
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;
}

Und als verwendet

.foo{
    @include radius(2px 3px 5px 6px)
}
.foo2{
    @include radius(2px 3px)
}
.foo3{
    @include radius(2px)
}

Das obige Beispiel ist viel einfacher (zum Codieren, Verwalten und Lesen), Sie müssen sich keine Gedanken darüber machen, wie viele Argumente kommen werden - ist es eines oder mehrere .

Wenn es mehr als ein Argument gibt und Sie in jedem Fall auf das zweite Argument zugreifen möchten, können Sie dies tun, indem Sie propertyname : nth(variable_name, 2) schreiben propertyname : nth(variable_name, 2) .

Vernünftige Standardeinstellungen

SASS gibt Ihnen die Möglichkeit, Parameter außer den Parametern, die Sie überschreiben möchten, wegzulassen. Nehmen wir noch einmal das default-box Beispiel:

@mixin default-box ($color: red, $borderColor: blue) {
    color: $color;
    border: 1px solid $borderColor;
    clear: both;
    display: block;
    margin: 5px 0;
    padding: 5px 10px;
}

Hier wird das Mixin aufgerufen, nachdem der zweite Parameter überschrieben wurde

footer, header{ @include default-box ($borderColor: #ccc); }

Der Wert von $borderColor ist #ccc , während $color red bleibt

Optionale Argumente

Mit den optionalen Argumenten von SASS können Sie einen Parameter nur verwenden, wenn Sie seinen Wert angeben. Andernfalls wird es ignoriert. Nehmen wir ein Beispiel für das folgende Mixin:

@mixin galerie-thumbnail ($img-height:14em, $img-width: null) {
    width: $img-width;
    height: $img-height;
    outline: 1px solid lightgray;
    outline-offset: 5px;
}

Also ein Anruf an

.default { 
  @include galerie-thumbnail; 
}
.with-width { 
  @include galerie-thumbnail($img-width: 12em);
}
.without-height { 
  @include galerie-thumbnail($img-height: null);
}

wird einfach folgendes in die CSS-Datei ausgeben:

.default {
  height: 14em;
  outline: 1px solid lightgray;
  outline-offset: 5px;
}

.with-width {
  width: 12em;
  height: 14em;
  outline: 1px solid lightgray;
  outline-offset: 5px;
}

.without-height {
  outline: 1px solid lightgray;
  outline-offset: 5px;
}

SASS gibt keine Eigenschaften mit dem Wert null , was sehr hilfreich ist, wenn wir ein optionales Argument in unseren Aufruf aufnehmen müssen oder nicht.

@content Direktive

Mixins kann ein Block mit SASS-kompatiblem Code übergeben werden, der im Mixin als @content Direktive verfügbar wird.

@mixin small-screen {
  @media screen and (min-width: 800px;) {
    @content;
  }
}

@include small-screen {
  .container {
    width: 600px;
  }
}

Und das würde ausgeben:

  @media screen and (min-width: 800px;) {
    .container {
      width: 600px;
    }
  }

Mixins können die @content Direktive verwenden und dennoch Parameter akzeptieren.

@mixin small-screen($offset) {...