Parameter von Mixins in SASS

Ein wichtiges Merkmal von Mixins in SASS ist, dass sie Variablen als Parameter entgegennehmen, die innerhalb runder Klammern notiert werden und, falls es mehrere Variablen gibt, diese durch Kommas getrennt werden.

Betrachten wir das folgende Beispiel:

styles.scss@mixin active($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dotted;
  }
}
p {
  @include active(yellow, 2px);
}

Ergebnis der Kompilierung:

styles.cssp {
  border-color: yellow;
  border-width: 2px;
  border-style: dashed; 
}

Zusätzlich können Standardwerte für Parameter an Mixins übergeben werden:

styles.scss@mixin active($color,  $width: 2px) {
  border: {
    color: $color;
    width: $width;
    style: dotted;
  }
}
p {
  @include active(yellow);
}
div {
  @include active(yellow, 4px);
}

Nach der Kompilierung sehen wir:

styles.cssp {
  border-color: yellow;
  border-width: 2px;
  border-style: dotted;
}
div {
  border-color: yellow;
  border-width: 4px;
  border-style: dotted;
}

styles.scss@mixin simple-border($padding-top, $padding-bottom) {
  border: {
    padding-top: $padding-top;
    padding-bottom: $padding-bottom;
    color: green;
  }
}
p {
  @include simple-border(10px, 30px );
}        

styles.scss@mixin simple-border($padding-top, $padding-bottom: 20px) {
  border: {
  padding-top: $padding-top;
  padding-bottom: $padding-bottom;
  color: green;
  }
}
p {
  @include simple-border(10px);
}