Ein praktischer Tipp zur Verwendung von Sass-Standardparametern

Sass bietet Funktionen und Mixins an, die Parameter akzeptieren. Sie können Sass-Standardparameter verwenden, d. h. Parameter, die einen Wert haben, auch wenn Sie diese beim Aufruf der Funktion oder des Mixins nicht angeben.

Konzentrieren wir uns hier auf Mixins. Hier ist die Syntax eines Mixins

@mixin foo($a, $b, $c) {
  // I can use $a, $b, and $c in here, but there is a risk they are null
}

.el {
  @include foo(1, 2, 3);

  // if I tried to do `@include foo;`
  // ... which is valid syntax... 
  // I'd get `Error: Missing argument $a.` from Sass
}

Es ist sicherer und nützlicher, Standardparameter in diesem Sass-Mixin einzurichten

@mixin foo($a: 1, $b: 2, $c: 3) {
}

.el {
  // Now this is fine
  @include foo;

  // AND I can send in params as well
  @include foo("three", "little", "pigs");
}

Aber was, wenn ich $b und $c senden, aber $a als Sass-Standardparameter belassen wollte? Der Trick ist, dass Sie *benannte* Parameter senden

@mixin foo($a: 1, $b: 2, $c: 3) {
}

.el {
  // Only sending in the second two params, $a will be the default.
  @include foo($b: 2, $c: 3);
}

Ein reales Beispiel für die Verwendung von Sass-Standardparametern

Hier ist ein schnelles Mixin, das das ausgibt, was Sie für sehr einfache, gestylte Scrollbars benötigen (Kitty hat auch eins)

@mixin scrollbars(
  $size: 10px,
  $foreground-color: #eee,
  $background-color: #333
) {
  // For Google Chrome
  &::-webkit-scrollbar {
    width: $size;
    height: $size;
  }
  &::-webkit-scrollbar-thumb {
    background: $foreground-color;
  }
  &::-webkit-scrollbar-track {
    background: $background-color;
  }

  // Standard version (Firefox only for now)
  scrollbar-color: $foreground-color $background-color;
}

Jetzt kann ich es so aufrufen

.scrollable {
  @include scrollbars;
}

.thick-but-otherwise-default-scrollable {
  // I can skip $b and $c because they are second and third
  @include scrollbars(30px);
}

.custom-colors-scrollable {
  // I can skip the first param if all the others are named.
  @include scrollbars($foreground-color: orange, $background-color: black);
}

.totally-custom-scrollable {
  @include scrollbars(20px, red, black);
}

Ich bemerke das nur, da ich ein wenig suchen musste, um das herauszufinden. Ich habe versucht, leere Strings oder null als ersten Parameter zu senden, um ihn zu „überspringen“, aber das funktioniert nicht. Sie müssen den Ansatz mit benannten Parametern wählen.