関数値

互換性（引数の型）
Dart Sass
✓
LibSass
3.5.0以降
Ruby Sass
3.5.0以降

LibSassとRuby Sassの古いバージョンでは、call() 関数は関数の名前を表す文字列を受け取っていました。これは、関数がグローバルではなくなり、特定の名前が常に同じ関数を指すとは限らない新しいモジュールシステムに備えて、関数値を受け取るように変更されました。

call() に文字列を渡すことは、すべての実装で引き続き機能しますが、非推奨であり、将来のバージョンでは許可されなくなります。

関数も値にすることができます！関数を値として直接記述することはできませんが、関数の名前をmeta.get-function() 関数に渡して、値として取得できます。関数値を取得したら、meta.call() 関数に渡して呼び出すことができます。これは、他の関数を呼び出す*高階関数*を記述するのに便利です。

プレイグラウンド

SCSS構文

@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"));
}
プレイグラウンド

Sass構文

@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出力

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