Функции

Функция принимает значения, что-то вычисляет и возвращает одно значение через @return. Миксин вставляет объявления, а функция используется внутри значения, например width: rem(24px). Функции удобны для повторяющихся вычислений: перевода единиц, шкалы отступов.

Первая функция

Функции хранят вместе с другими инструментами в styles/abstracts/. Создайте styles/abstracts/_functions.scss с функцией, которая переводит пиксели в rem:

// styles/abstracts/_functions.scss
@use "sass:math";
 
@function rem($pixels) {
  @return math.div($pixels, 16px) * 1rem;
}

math.div(24px, 16px) даёт число без единицы 1.5 — пиксели сокращаются, — а умножение на 1rem добавляет единицу.

Вызов функции

Функция вызывается как функция CSS, через пространство имён модуля:

// styles/components/_cards.scss
@use "../abstracts/functions";
 
.card {
  padding: functions.rem(24px);
  font-size: functions.rem(18px);
}

// styles/main.scss
@use "components/cards";

.card {
  padding: 1.5rem;
  font-size: 1.125rem;
}

В браузере 1.5rem растёт, когда читатель увеличивает размер шрифта в настройках, — поэтому размеры пишут в rem, а функция позволяет думать в пикселях из макета.

Аргументы со значениями по умолчанию

Как и у миксинов, у аргументов могут быть значения по умолчанию, а передавать их можно по имени. Добавьте в тот же файл шкалу отступов: шаг 1 — 4px, шаг 2 — 8px и так далее:

// styles/abstracts/_functions.scss
@function space($step, $base: 4px) {
  @return $step * $base;
}

// styles/components/_buttons.scss
@use "../abstracts/functions";
 
.btn {
  padding: functions.space(2) functions.space(4);
  margin-right: functions.space($step: 3, $base: 5px);
}

// styles/main.scss
@use "components/buttons";

.btn {
  padding: 8px 16px;
  margin-right: 15px;
}

Все отступы сайта берутся из одной шкалы и поэтому согласованы между собой.

Функция или миксин

Если нужно число, цвет или строка — пишите функцию. Если нужны строки CSS — миксин.

Частая ошибка

Функция обязана дойти до @return. Если его забыть — например, написать вычисление, но не вернуть результат, — Sass остановится с ошибкой Function finished without @return. Кроме того, функция не может выводить объявления: color: red; внутри @function — ошибка. Всё, что делает функция, заканчивается одним @return.