Функции

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

scss
$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)
css
#sidebar {
  width: 240px;
}

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

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

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

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


Ваша 
Поддержка