sass-site/source/code-snippets/example-first-class-function.liquid

<!-- TODO(nweiz): auto-generate this CSS once we're compiling with Dart Sass -->

{% codeExample 'first-class-function' %}
  @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"));
  }
  ===
  @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"))
  ===
  .content {
    font-family: Tahoma, Geneva, Arial, sans-serif;
  }
{% endcodeExample %}