Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

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

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

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

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

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

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

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

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

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

11 <h2>Возвращение значения</h2>

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

13 <h2>Возвращение другой функции</h2>

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

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

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

17 <h2>Функция или миксин?</h2>

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

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

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

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

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

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