Функции
Существует возможность определить собственные функции в Sass и использовать их в любом значении или контексте скрипта. Например:
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar {
width: grid-width(5);
}
$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);
}
#sidebar
width: grid-width($n: 5)
Рекомендуется использовать префиксы для функций во избежание конфликтов имён, а также, чтобы читатель ваших таблиц стилей понимал, что эти функции не являются частью Sass или CSS. Например, если бы вы работали в компании ACME, то функция выше могла бы быть названа вами как -acme-grid-width.
Поддержка