SASS: Программирование
2026-02-26 18:22 Diff
https://ru.hexlet.io/courses/sass-programming/lessons/function/theory_unit

В одном из прошлых уроков мы научились использовать миксины как функции. Вспомним, что функции — участки кода, которые могут принимать аргументы и в конечном итоге возвращают результат своей работы. Таким образом мы можем совершать операции с разными числами множество раз. Можно привести простой пример получения квадрата любого числа. Для этого нам необходимо умножить число на само себя. Попробуем это сделать с помощью SASS.

Чтобы создать функцию в SASS используется ключевое слово @function, после которого идёт уникальное имя функции. Именно по этому имени мы и будем обращаться к функции впоследствии.

Теперь мы должны определить аргументы нашей функции. Аргумент — некая переменная, от которой зависит результат выполнения функции. Если вы разобрались с миксинами, то здесь проблем не возникнет. В отличие от миксинов, любая функция после имени имеет круглые скобки, даже в том случае, если никакие аргументы не передаются. Наша функция возведения в квадрат принимает один аргумент — число, которое возводится в квадрат. Не забудьте, что имена аргументов могут быть произвольными и обязательно указываются, как переменные.

Мы создали определение функции. Теперь настала очередь написать тело функции, в котором содержатся все необходимые вычисления.

Что здесь произошло? Мы создали переменную $result в которую поместили результат перемножения числа на само себя. Создание переменной для результата — хорошая практика, которая помогает быстрее разобраться в коде.

При выборе имён переменных исходите из того, что имена должны быть понятными и нести смысловую нагрузку. Нет смысла создавать переменные с именами $abc, $lala и так далее. Да — это быстрый путь, но поверьте, что через неделю вы и сами не вспомните, что хранится в той или иной переменной. Вы можете прочитать про именование в программировании в нашем блоге.

С этого момента начинаются главные различия между созданием миксинов и использовании аргументов и созданием функции. Функция всегда что-то возвращает. Сейчас наша функция только считает, но ничего не возвращает. Это схоже с тем, как если вам зададут вопрос, вы найдёте ответ, но никому не расскажете. Чтобы функция могла рассказать, что она вычислила, используется конструкция @return. После неё указывается то, что мы хотим вернуть. В данном случае переменную $result.

Теперь наша функция полностью готова. У неё есть имя и аргументы, она делает операции внутри себя и возвращает какой-то результат. В этом достаточно просто убедиться — попробуем вызвать нашу функцию. Для этого достаточно указать её имя и аргументы, которые она принимает.

Скомпилируем наш файл и получим следующий CSS-код:

Сейчас пример может казаться достаточно бесполезным, но со временем вы узнаете о различных конструкциях, которые возможно использовать в теле ваших функций. Это мощный инструмент, который сократит вам десятки часов при разработке.

Возвращение значения

В прошлом примере для возвращения результата мы использовали конструкцию @return и переменную $result, которая создавалась в самом начале тела нашей функции. При таких простых вычислениях можно не использовать дополнительную переменную, а подставлять необходимое выражение непосредственно в @return. Это сократит количество кода. Будьте аккуратны — используйте выражения в @return только при полностью понятной структуре того, что возвращается. Никогда не гонитесь за тем, чтобы написать максимально короткие функции. Впоследствии, возможно, их будет трудно поддерживать. Для простого перемножения можно использовать @return сразу. Тогда наша функция будет выглядеть следующим образом:

Возвращение другой функции

Помимо возвращения какого-то значения из функции, мы можем возвращать другие функции. В таком случае вначале функция, которую мы возвращаем, выполнится, и именно её значение будет возвращено. Это удобно в больших проектах, когда одна функция считает аргументы для второй функции и вызывает её. Таким образом можно писать достаточно короткие функции, которые легко читать и понимать.

Давайте представим, что мы хотим возвести в квадрат сумму переданных аргументов. При этом все аргументы должны браться по модулю, чтобы не было отрицательных значений. Если до этого у нас уже была функция возведения в квадрат, то нет никакого смысла вводить её в новой функции заново. Можно просто ей воспользоваться при возврате значения. А для того, что бы взять модуль числа воспользуемся встроенной функцией abs():

Результатом выполнения abs-square-sum(-10, 5) станет число 225.

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

На первый взгляд может показаться, что нет особых отличий между использованием миксинов и функций. Тогда зачем нам это разделение? Используем миксины везде и живём спокойно. Используем один синтаксис и больше не путаемся.

Необходимо разграничить для себя, когда используются функции, а когда миксины. Миксины — это, в первую очередь, возможность переиспользования CSS-свойств. Не стоит пытаться использовать там логики больше, чем это необходимо. Функции используются для вычислений и зачастую не связаны непосредственно с CSS.

Рассмотрим это утверждение на примере увеличения размера шрифта в полтора раза. При использовании миксинов это может выглядеть следующим образом:

После компиляции получим следующий код:

Выполним те же преобразования, но с использованием функций.

Результат выполнения этой функции будет точно таким же. Позволю себе его не копировать :) Как можно заметить, мы получили один и тот же результат, но с двумя разными подходами. Главный смысл функций в том, что нам не важно, где производить умножение на полтора. Эту функцию можно использовать и для вычисления отступов, высоты/ширины. Мы не завязаны на каком-то конкретном свойстве или единице измерения. В этом функции выигрывают у миксинов. Всегда учитывайте то, для чего используются вычисления. В зависимости от этого выбирайте использование или миксинов, или функций.