SASS Schnellstart – Mixins

In den letzten Jahren hat HTML große Fortschritte gemacht, um semantischer zu werden.

Tags wie <aside> und <article> erzwingen die Bedeutung des Inhalts und nicht sein Layout. Leider gilt das Gleiche nicht für CSS. Die Definition von Klassen wie .float-left, .row und .col ist besser als die Neudefinition der float-Property für jedes HTML-Tag, aber sie trägt kaum zur Bedeutung des HTML-Codes bei.

@mixin Directive

Es gibt CSS-Frameworks, die versuchen, dieses Problem zu lösen, jedoch bietet Sass einen anderen Weg, über das @mixin Directive. Mixins werden in erster Linie verwendet, um nicht-semantisches Styling bereitzustellen, aber sie können jedes gültige CSS oder Sass enthalten. Die Syntax ist einfach zu verstehen.

@mixin <Name> 
{ 
    <Inhalt> 
}

@include

Sobald du das Mixin erstellt hast, verwende einfach @include an der Stelle, an der die Regeln in deine Datei aufgenommen werden sollen.

<selector>
{
    @include <mixin-name>

[<weitere Regeln>]

}

@mixin float-left { 
   float: left; 
}
.modal { 
   @include float-left; 
   background-color: blue;
}

Der o.g. Code wird in folgendes CSS kompiliert:

.modal {
   float: left;
   background-color: blue;
}

Ein Sass-Mixin ist nicht darauf beschränkt, nur Eigenschaftsregeln zu definieren; es kann auch Selektoren enthalten, einschließlich übergeordneter Selektoren. Mit dieser Technik könntest du z.B. alle Regeln für einen Button-ähnlichen Link in einem einzigen Mixin definieren:

@mixin a-button {
    a {
        background-color: blue;
        farbe: weiß;
        radius: 3px;
        margin: 2px;

        &:hover {
            color: red;
        }

        &:visited {
            color: green;
        }
    }
}
}

Verwende das @include Directive, um dieses Mixin in einen Style einzubinden, hier gezeigt:

@include a-button.scss //angenommen a-button.scss ist der Name der obigen Mixin-Datei

.menu-button { 
   @include a-button; 
}

Hier ist die Ausgabe in CSS:

.menu-button a {
  background-color: blue;
  color: white;
  radius: 3px;
  margin: 2px;
}

.menu-button a:hover {
  color: red;
}

.menu-button a:visited {
  color: green;
}
}

Mixin-Variablen

Wenn du mehr als eine Klasse hast, die diese Funktionalität beinhaltet, ist es klar, dass das vorherige Beispiel eine Menge Tipparbeit einspart und besser wartbar ist.

Aber was ist, wenn du mehrere Klassen hast, die die gleiche Grundfunktionalität haben, aber du z.B. verschiedene Farben übergeben musst?

Sass macht es dir leicht: Übergib die Farben einfach als Variablen, die wie Funktionsparameter definiert sind:

@mixin a-button($base, $hover, $link) {
  a {
    background-color: $base;
    color: white;
    radius: 3px;
    margin: 2px;

    &:hover {
      color: $hover;
    }

    &:visited {
      color: $link;
    }
  }
}

Du übergibst die Variablenargumente mit der normalen Syntax an das Mixin:

.menu-button {
  @include a-button(blue, red, green);
}

.text-button {
  @include a-button(yellow, black, gray);
}

Dieses Beispiel würde zu folgendem CSS führen:

.menu-button a {
  background-color: blue;
  color: white;
  radius: 3px;
  margin: 2px;
}

.menu-button a:hover {
  color: red;
}

.menu-button a:visited {
  color: green;
}

.text-button a {
  background-color: yellow;
  farbe: white;
  radius: 3px;
  margin: 2px;
}

.text-button a:hover {
  color: black;
}

.text-button a:visited {
  color: grey;
}

@mixin a-button($base: red, $hover: green, $link: blue) {
  a {
    background-color: $base;
    color: white;
    radius: 3px;
    margin: 2px;

    &:hover {
      color: $hover;
    }

    &:visited {
      color: $link;
    }
  }
}

Wenn du eine Standardvariable auf diese Weise definierst, musst du nur Werte angeben, die sich ändern, wenn du das Mixin einfügst:

.menu-button { 
   @include a-button($link: orange); 
}

.menu-button a {
  background-color: blue;
  color: white;
  radius: 3px;
  margin: 2px;
}

.menu-button a:hover {
  color: red;
}

.menu-button a:visited {
  color: orange;
}
}

Wie du sehen kannst, wird der a:visited Regel die Eigenschaft "color:orange" zugewiesen (so wie es sein soll),  aber die anderen beiden Regeln haben die von uns definierten Standardwerte.

Genau wie beim Aufruf einer Sass-Funktion musst du nur dann den Parameternamen angeben, wenn du die Argumente nicht in falscher Reihenfolge einfügst oder einige überspringst. Das würde gut funktionieren (obwohl der resultierende Button ziemlich hässlich wäre)

.menu-button { 
   @include a-button(darkmagenta, darkolivegreen, skyblue);
}

Einige CSS-Eigenschaften können eine unterschiedliche Anzahl von Variablen annehmen. Ein Beispiel ist die margin-Eigenschaft, die zwischen 1 und 4 Werte annehmen kann. Sass unterstützt dies durch variable Argumente, die mit einer Ellipse nach ihrem Namen deklariert werden:

@mixin margin-mix($margin...) {
   margin: $margin; 
}

Mit dieser Mixin-Definition wird jede der folgenden @include-Directives ohne Fehler transpiliert:

.narrow-border { 
   @include margin-mix(1px);
}

.top-bottom-border { 
   @include margin-mix(3px 2px);
}

.varied-border { 
   @include margin-mix(1px 3px 6px 10px); 
}

In CSS erhältst du folgenden Code.

.narrow-border {
  margin: 1px;
}

.top-bottom-border { 
   margin: 3px 2px; 
}

.varied-border { 
   margin: 1px 3px 6px 10px;
}

Übergabe von Inhalten an Mixins

Meistens verwendest du Mixins für Standard-Stylings, die du an mehreren Stellen verwendest und mit zusätzlichen Regeln erweiterst, wenn du sie einfügst.

Du kannst aber auch Mixins erstellen, die in die andere Richtung funktionieren, indem du einen Block von Regeln an das Mixin übergibst. Du brauchst dafür keine Variable; der Inhalt, den du übergibst, ist für das Mixin über das @content Directive verfügbar:

@mixin hat-inhalt { 
   html { 
      @inhalt; 
   }
}

@include has-content { #logo { background-image: url(logo.svg); } }

Dies wird zu folgender CSS-Ausgabe führen:

html #logo { 
   background-image: url(emoji.png); 
}

Beachte, dass die Syntax hier geschweifte Klammern und keine Klammern verwendet, um den Inhalt von Sass-Variablen zu unterscheiden, die das Mixin deklarieren könnte. Du kannst beides verwenden;

@mixin test-content($color) {
  .test {
    color: $color;
    @content;
  }
}

@include test-content(blue) {
  background-color: red;
}

Der o.g. Code führt zu folgendem CSS-Code.

.test {
  color: blue;
  background-color: red;
}