Существует возможность определить собственные функции в Sass и использовать их в любом значении или контексте скрипта. Например:

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

компилируется в

#sidebar {
  width: 240px; }

Как вы видите, функции имеют доступ к любым глобальным переменным, а также принимают параметры как и миксины (примеси). Функция может содержать несколько операторов, и вы должны вызвать @return, чтобы установить возвращаемое значение функции.

Также, как и миксины, определённые в Sass функции могут быть вызваны с именованными аргументами. В предыдущем примере мы могли бы вызвать функцию так:

#sidebar { width: grid-width($n: 5); }

Рекомендуется использовать префиксы для функций во избежание конфликтов имён, а также, чтобы читатель ваших таблиц стилей понимал, что эти функции не являются частью Sass или CSS. Например, если бы вы работали в компании ACME, то функция выше могла бы быть названа вами как -acme-grid-width.



На сайте функционирует система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter. Также отправить оповещение об ошибке можно, нажав на эту ссылку.