@mixin und @include

Mixins ermöglichen es Ihnen, Stile zu definieren, die in Ihrer gesamten Stylesheet wiederverwendet werden können. Sie erleichtern die Vermeidung der Verwendung nicht-semantischer Klassen wie .float-left und die Verteilung von Stilkollektionen in Bibliotheken.

Mixins werden mit der @mixin-Regel definiert, die entweder als @mixin <name> { ... } oder als @mixin name(<argumente...>) { ... } geschrieben wird. Der Name eines Mixins kann ein beliebiger Sass-Bezeichner sein, der nicht mit -- beginnt, und er kann jede Anweisung außer Top-Level-Anweisungen enthalten. Sie können verwendet werden, um Stile zu kapseln, die in eine einzige Stilregel eingefügt werden können; sie können eigene Stilregeln enthalten, die in andere Regeln verschachtelt oder auf der obersten Ebene des Stylesheets eingeschlossen werden können; oder sie können einfach dazu dienen, Variablen zu modifizieren .

Mixins werden mit der @include-Regel in den aktuellen Kontext eingefügt, die entweder als @include <name> oder als @include <name>(<argumente...>) geschrieben wird, wobei der Name des einzufügenden Mixins angegeben ist .

Spielplatz

SCSS-Syntax

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}
Spielplatz

Sass-Syntax

@mixin reset-list
  margin: 0
  padding: 0
  list-style: none


@mixin horizontal-list
  @include reset-list

  li
    display: inline-block
    margin:
      left: -2px
      right: 2em




nav ul
  @include horizontal-list

CSS-Ausgabe

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}

💡 Lustige Tatsache

Mixin-Namen behandeln, wie alle Sass-Bezeichner, Bindestriche und Unterstriche als identisch. Das bedeutet, dass reset-list und reset_list beide auf dasselbe Mixin verweisen. Dies ist ein historischer Überbleibsel aus den Anfängen von Sass, als es nur Unterstriche in Bezeichnernamen erlaubte. Als Sass die Unterstützung für Bindestriche zur Anpassung an die CSS-Syntax hinzufügte, wurden die beiden gleichgesetzt, um die Migration zu erleichtern.

ArgumenteArgumente Permalink

Mixins können auch Argumente entgegennehmen, was es ermöglicht, ihr Verhalten bei jedem Aufruf anzupassen. Die Argumente werden in der @mixin-Regel nach dem Namen des Mixins als Liste von Variablennamen in Klammern angegeben. Das Mixin muss dann mit der gleichen Anzahl von Argumenten in Form von SassScript-Ausdrücken eingeschlossen werden. Die Werte dieser Ausdrücke sind innerhalb des Körpers des Mixins als entsprechende Variablen verfügbar.

Spielplatz

SCSS-Syntax

@mixin rtl($property, $ltr-value, $rtl-value) {
  #{$property}: $ltr-value;

  [dir=rtl] & {
    #{$property}: $rtl-value;
  }
}

.sidebar {
  @include rtl(float, left, right);
}
Spielplatz

Sass-Syntax

@mixin rtl($property, $ltr-value, $rtl-value)
  #{$property}: $ltr-value

  [dir=rtl] &
    #{$property}: $rtl-value



.sidebar
  @include rtl(float, left, right)

CSS-Ausgabe

.sidebar {
  float: left;
}
[dir=rtl] .sidebar {
  float: right;
}

💡 Lustige Tatsache

Argumentlisten können auch abschließende Kommas haben! Dies erleichtert die Vermeidung von Syntaxfehlern bei der Refaktorierung Ihrer Stylesheets.

Optionale ArgumenteOptionale Argumente Permalink

Normalerweise muss jedes Argument, das ein Mixin deklariert, beim Einschließen des Mixins übergeben werden. Sie können ein Argument jedoch optional machen, indem Sie einen Standardwert definieren, der verwendet wird, wenn das Argument nicht übergeben wird. Standardwerte verwenden dieselbe Syntax wie Variablendeklarationen: der Variablenname, gefolgt von einem Doppelpunkt und einem SassScript-Ausdruck. Dies erleichtert die Definition flexibler Mixin-APIs, die auf einfache oder komplexe Weise verwendet werden können.

Spielplatz

SCSS-Syntax

@mixin replace-text($image, $x: 50%, $y: 50%) {
  text-indent: -99999em;
  overflow: hidden;
  text-align: left;

  background: {
    image: $image;
    repeat: no-repeat;
    position: $x $y;
  }
}

.mail-icon {
  @include replace-text(url("/images/mail.svg"), 0);
}
Spielplatz

Sass-Syntax

@mixin replace-text($image, $x: 50%, $y: 50%)
  text-indent: -99999em
  overflow: hidden
  text-align: left

  background:
    image: $image
    repeat: no-repeat
    position: $x $y

.mail-icon
  @include replace-text(url("/images/mail.svg"), 0)

CSS-Ausgabe

.mail-icon {
  text-indent: -99999em;
  overflow: hidden;
  text-align: left;
  background-image: url("/images/mail.svg");
  background-repeat: no-repeat;
  background-position: 0 50%;
}

💡 Lustige Tatsache

Standardwerte können beliebige SassScript-Ausdrücke sein und sogar frühere Argumente referenzieren!

SchlüsselwortargumenteSchlüsselwortargumente Permalink

Beim Einschließen eines Mixins können Argumente zusätzlich zur Übergabe anhand ihrer Position in der Argumentliste auch namentlich übergeben werden. Dies ist besonders nützlich für Mixins mit mehreren optionalen Argumenten oder mit booleschen Argumenten, deren Bedeutung ohne einen zugehörigen Namen nicht offensichtlich ist. Schlüsselwortargumente verwenden dieselbe Syntax wie Variablendeklarationen und optionale Argumente.

Spielplatz

SCSS-Syntax

@mixin square($size, $radius: 0) {
  width: $size;
  height: $size;

  @if $radius != 0 {
    border-radius: $radius;
  }
}

.avatar {
  @include square(100px, $radius: 4px);
}
Spielplatz

Sass-Syntax

@mixin square($size, $radius: 0)
  width: $size
  height: $size

  @if $radius != 0
    border-radius: $radius



.avatar
  @include square(100px, $radius: 4px)

CSS-Ausgabe

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 4px;
}

⚠️ Vorsicht!

Da jedes Argument namentlich übergeben werden kann, seien Sie vorsichtig, wenn Sie die Argumente eines Mixins umbenennen... es könnte die Benutzer brechen! Es kann hilfreich sein, den alten Namen eine Weile als optionales Argument beizubehalten und eine Warnung auszugeben, wenn jemand ihn übergibt, damit er weiß, dass er auf das neue Argument migrieren muss.

Beliebige Argumente entgegennehmenBeliebige Argumente entgegennehmen Permalink

Manchmal ist es nützlich, wenn ein Mixin eine beliebige Anzahl von Argumenten entgegennehmen kann. Wenn das letzte Argument in einer @mixin-Deklaration mit ... endet, werden alle zusätzlichen Argumente an dieses Argument als Liste übergeben. Dieses Argument wird als Argumentliste bezeichnet .

Spielplatz

SCSS-Syntax

@mixin order($height, $selectors...) {
  @for $i from 0 to length($selectors) {
    #{nth($selectors, $i + 1)} {
      position: absolute;
      height: $height;
      margin-top: $i * $height;
    }
  }
}

@include order(150px, "input.name", "input.address", "input.zip");
Spielplatz

Sass-Syntax

@mixin order($height, $selectors...)
  @for $i from 0 to length($selectors)
    #{nth($selectors, $i + 1)}
      position: absolute
      height: $height
      margin-top: $i * $height




@include order(150px, "input.name", "input.address", "input.zip")

CSS-Ausgabe

input.name {
  position: absolute;
  height: 150px;
  margin-top: 0px;
}

input.address {
  position: absolute;
  height: 150px;
  margin-top: 150px;
}

input.zip {
  position: absolute;
  height: 150px;
  margin-top: 300px;
}

Beliebige Schlüsselwortargumente entgegennehmenBeliebige Schlüsselwortargumente entgegennehmen Permalink

Argumentlisten können auch verwendet werden, um beliebige Schlüsselwortargumente entgegenzunehmen. Die meta.keywords()-Funktion nimmt eine Argumentliste entgegen und gibt alle zusätzlichen Schlüsselwörter, die an das Mixin übergeben wurden, als Map von Argumentnamen (ohne $) zu den Werten dieser Argumente zurück.

Spielplatz

SCSS-Syntax

@use "sass:meta";

@mixin syntax-colors($args...) {
  @debug meta.keywords($args);
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args) {
    pre span.stx-#{$name} {
      color: $color;
    }
  }
}

@include syntax-colors(
  $string: #080,
  $comment: #800,
  $variable: #60b,
)
Spielplatz

Sass-Syntax

@use "sass:meta"

@mixin syntax-colors($args...)
  @debug meta.keywords($args)
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args)
    pre span.stx-#{$name}
      color: $color




@include syntax-colors($string: #080, $comment: #800, $variable: #60b)

CSS-Ausgabe

pre span.stx-string {
  color: #080;
}

pre span.stx-comment {
  color: #800;
}

pre span.stx-variable {
  color: #60b;
}

💡 Lustige Tatsache

Wenn Sie der meta.keywords()-Funktion nie eine Argumentliste übergeben, lässt diese Argumentliste keine zusätzlichen Schlüsselwortargumente zu. Dies hilft Aufrufern Ihres Mixins sicherzustellen, dass sie keine Argumentnamen versehentlich falsch geschrieben haben .

Beliebige Argumente übergebenBeliebige Argumente übergeben Permalink

So wie Argumentlisten es Mixins ermöglichen, beliebige positions- oder schlüsselwortbasierte Argumente entgegenzunehmen, kann dieselbe Syntax verwendet werden, um positions- und schlüsselwortbasierte Argumente an ein Mixin zu übergeben. Wenn Sie eine Liste gefolgt von ... als letztes Argument eines Includes übergeben, werden ihre Elemente als zusätzliche Positionsargumente behandelt. Ebenso wird eine Map gefolgt von ... als zusätzliche Schlüsselwortargumente behandelt. Sie können sogar beides gleichzeitig übergeben !

Spielplatz

SCSS-Syntax

$form-selectors: "input.name", "input.address", "input.zip" !default;

@include order(150px, $form-selectors...);
Spielplatz

Sass-Syntax

$form-selectors: "input.name", "input.address", "input.zip" !default

@include order(150px, $form-selectors...)

💡 Lustige Tatsache

Da eine Argumentliste sowohl Positions- als auch Schlüsselwortargumente verfolgt, verwenden Sie sie, um beide gleichzeitig an ein anderes Mixin zu übergeben. Das macht es extrem einfach, einen Alias für ein Mixin zu definieren!

Spielplatz

SCSS-Syntax

@mixin btn($args...) {
  @warn "The btn() mixin is deprecated. Include button() instead.";
  @include button($args...);
}
Spielplatz

Sass-Syntax

@mixin btn($args...)
  @warn "The btn() mixin is deprecated. Include button() instead."
  @include button($args...)

InhaltsblöckeInhaltsblöcke Permalink

Neben der Entgegennahme von Argumenten kann ein Mixin einen gesamten Stilblock entgegennehmen, der als Inhaltsblock bezeichnet wird. Ein Mixin kann deklarieren, dass es einen Inhaltsblock entgegennimmt, indem es die @content-Regel in seinem Körper verwendet. Der Inhaltsblock wird mit geschweiften Klammern wie jeder andere Block in Sass übergeben und an der Stelle der @content-Regel eingefügt.

Spielplatz

SCSS-Syntax

@mixin hover {
  &:not([disabled]):hover {
    @content;
  }
}

.button {
  border: 1px solid black;
  @include hover {
    border-width: 2px;
  }
}
Spielplatz

Sass-Syntax

@mixin hover
  &:not([disabled]):hover
    @content



.button
  border: 1px solid black
  @include hover
    border-width: 2px

CSS-Ausgabe

.button {
  border: 1px solid black;
}
.button:not([disabled]):hover {
  border-width: 2px;
}

💡 Lustige Tatsache

Ein Mixin kann mehrere @content-Regeln enthalten. Wenn es dies tut, wird der Inhaltsblock für jede @content separat eingefügt.

⚠️ Vorsicht!

Ein Inhaltsblock ist lexikalisch gescopet, was bedeutet, dass er nur lokale Variablen im Geltungsbereich sehen kann, in dem das Mixin eingeschlossen ist. Er kann keine Variablen sehen, die in dem Mixin definiert sind, an das er übergeben wird, selbst wenn sie vor dem Aufruf des Inhaltsblocks definiert werden .

Argumente an Inhaltsblöcke übergebenArgumente an Inhaltsblöcke übergeben Permalink

Kompatibilität
Dart Sass
seit 1.15.0
LibSass
✗
Ruby Sass
✗

Ein Mixin kann Argumente an seinen Inhaltsblock übergeben, genauso wie es Argumente an ein anderes Mixin übergeben würde, indem es @content(<argumente...>) schreibt. Der Benutzer, der den Inhaltsblock schreibt, kann Argumente akzeptieren, indem er @include <name> using (<argumente...>) schreibt. Die Argumentliste für einen Inhaltsblock funktioniert genauso wie die Argumentliste eines Mixins, und die an ihn von @content übergebenen Argumente funktionieren genauso wie das Übergeben von Argumenten an ein Mixin.

⚠️ Vorsicht!

Wenn ein Mixin Argumente an seinen Inhaltsblock übergibt, muss dieser Inhaltsblock deklarieren, dass er diese Argumente akzeptiert. Das bedeutet, dass es eine gute Idee ist, nur Argumente nach Position zu übergeben (nicht namentlich) und dass das Übergeben von mehr Argumenten eine breaking Change darstellt.

Wenn Sie flexibel sein möchten, welche Informationen Sie an einen Inhaltsblock übergeben, sollten Sie ihm eine Map übergeben, die Informationen enthält, die er möglicherweise benötigt !

Spielplatz

SCSS-Syntax

@mixin media($types...) {
  @each $type in $types {
    @media #{$type} {
      @content($type);
    }
  }
}

@include media(screen, print) using ($type) {
  h1 {
    font-size: 40px;
    @if $type == print {
      font-family: Calluna;
    }
  }
}
Spielplatz

Sass-Syntax

@mixin media($types...)
  @each $type in $types
    @media #{$type}
      @content($type)




@include media(screen, print) using ($type)
  h1
    font-size: 40px
    @if $type == print
      font-family: Calluna

CSS-Ausgabe

@media screen {
  h1 {
    font-size: 40px;
  }
}
@media print {
  h1 {
    font-size: 40px;
    font-family: Calluna;
  }
}

Eingerückte Mixin-SyntaxEingerückte Mixin-Syntax Permalink

Die eingerückte Syntax hat eine spezielle Syntax für die Definition und Verwendung von Mixins, zusätzlich zu den Standard-@mixin und @include. Mixins werden mit dem Zeichen = definiert und mit + eingeschlossen. Obwohl diese Syntax kürzer ist, ist sie auch auf den ersten Blick schwerer zu verstehen und Benutzer werden ermutigt, sie zu vermeiden .

Spielplatz

Sass-Syntax

=reset-list
  margin: 0
  padding: 0
  list-style: none

=horizontal-list
  +reset-list

  li
    display: inline-block
    margin:
      left: -2px
      right: 2em

nav ul
  +horizontal-list

CSS-Ausgabe

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}