sass-site/source/documentation/values/functions.html.md.erb
2018-10-23 13:42:40 -07:00

74 lines
2.3 KiB
Plaintext

---
title: Functions
---
<% impl_status dart: true, libsass: '3.5.0', ruby: '3.5.0' do %>
In older versions of LibSass and Ruby Sass, the [`call()` function][] took a
string representing a function's name. This was changed to take a function
value instead in preparation for a new module system where functions are no
longer global and so a given name may not always refer to the same function.
[`call()` function]: ../functions/meta#call
<% end %>
[Functions][] can be values too! You can't directly write a function as a value,
but you can pass a function's name to the [`get-function()` function][] to get
it as a value. Once you have a function value, you can pass it to the [`call()`
function][] to call it. This is useful for writing *higher-order functions* that
call other functions.
[Functions]: ../at-rules/function
[`get-function` function]: ../functions/meta#get-function
[`call()` function]: ../functions/meta#call
<%# TODO(nweiz): auto-generate this CSS once we're compiling with Dart Sass %>
<% example do %>
/// 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 call($condition, $element) {
$new-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 str-index($string, "Helvetica");
}
font-family: remove-where($fonts, get-function("contains-helvetica"));
}
===
/// 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 call($condition, $element)
$new-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 str-index($string, "Helvetica")
font-family: remove-where($fonts, get-function("contains-helvetica"))
===
content {
font-family: Tahoma, Geneva, Arial, sans-serif;
}
<% end %>