Funktionswerte

Kompatibilität (Argumenttyp)
Dart Sass
✓
LibSass
seit 3.5.0
Ruby Sass
seit 3.5.0

In älteren Versionen von LibSass und Ruby Sass nahm die call()-Funktion einen String entgegen, der den Namen einer Funktion darstellte. Dies wurde geändert, um stattdessen einen Funktionswert zu akzeptieren, als Vorbereitung auf ein neues Modulsystem, in dem Funktionen nicht mehr global sind und ein gegebener Name daher nicht immer die gleiche Funktion bezeichnen kann.

Das Übergeben eines Strings an call() funktioniert in allen Implementierungen immer noch, ist aber veraltet und wird in zukünftigen Versionen nicht mehr zulässig sein.

Funktionen können auch Werte sein! Sie können eine Funktion nicht direkt als Wert schreiben, aber Sie können den Namen einer Funktion an die meta.get-function()-Funktion übergeben, um sie als Wert zu erhalten. Sobald Sie einen Funktionswert haben, können Sie ihn an die meta.call()-Funktion übergeben, um ihn aufzurufen. Dies ist nützlich für das Schreiben von higher-order functions, die andere Funktionen aufrufen.

Spielplatz

SCSS-Syntax

@use "sass:list";
@use "sass:meta";
@use "sass:string";

/// Return a copy of $list with all elements for which $condition returns `true`
/// removed.
@function remove-where($list, $condition) {
  $new-list: ();
  $separator: list.separator($list);
  @each $element in $list {
    @if not meta.call($condition, $element) {
      $new-list: list.append($new-list, $element, $separator: $separator);
    }
  }
  @return $new-list;
}

$fonts: Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

.content {
  @function contains-helvetica($string) {
    @return string.index($string, "Helvetica");
  }
  font-family: remove-where($fonts, meta.get-function("contains-helvetica"));
}
Spielplatz

Sass-Syntax

@use "sass:list"
@use "sass:meta"
@use "sass:string"

/// Return a copy of $list with all elements for which $condition returns `true`
/// removed.
@function remove-where($list, $condition)
  $new-list: ()
  $separator: list.separator($list)
  @each $element in $list
    @if not meta.call($condition, $element)
      $new-list: list.append($new-list, $element, $separator: $separator)


  @return $new-list


$fonts: Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif

.content
  @function contains-helvetica($string)
    @return string.index($string, "Helvetica")

  font-family: remove-where($fonts, meta.get-function("contains-helvetica"))

CSS-Ausgabe

.content {
  font-family: Tahoma, Geneva, Arial, sans-serif;
}