Articles
Введение в SASS/SCSS
Функции SASS

Функции SASS

В этой статье объясняются функции SASS.

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

YouTube Video

Функции SASS

Функции SASS — это мощные инструменты, которые инкапсулируют повторно используемую логику в стилях, обеспечивая вычисления, форматирование и условные переходы.

Базовая структура и использование функций

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

1// Example: Define a simple function that doubles a value
2@function double($n) {
3  @return $n * 2;
4}
5
6// Use the function
7.example {
8  width: double(10px);  // -> 20px
9}
  • Этот код определяет функцию, которая удваивает число и применяет его к ширине. В результате будет сгенерировано: .example { width: 20px; }.

Аргументы, значения по умолчанию и обработка типов

Функции могут принимать несколько аргументов и задавать значения по умолчанию. SASS не использует строгую типизацию, но внимательное отношение к форматам аргументов делает функции надёжнее.

1// Example: Function with default parameters
2@function responsive-font($base-size, $scale: 1.2, $unit: px) {
3  @return $base-size * $scale + $unit;
4}
5
6.title {
7  font-size: responsive-font(16, 1.25);  // -> 20px
8}
  • В функции responsive-font значения по умолчанию заданы для scale и unit, некоторые аргументы можно опускать при вызове. В этом примере будет выведено значение вроде font-size: 20px;.

Использование переменного числа аргументов (...)

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

 1// Example: Sum any number of numbers passed in
 2@function sum-all($numbers...) {
 3  $total: 0;
 4  @each $n in $numbers {
 5    $total: $total + $n;
 6  }
 7  @return $total;
 8}
 9
10.box {
11  padding: sum-all(4px, 6px, 10px);  // -> 20px
12}
  • Переменный аргумент вроде $numbers... рассматривается как список и может быть обработан с помощью @each. В этом примере будет получено padding: 20px;.

Возврат и обработка списков или ассоциативных массивов

Функции также могут возвращать списки (через пробел или запятую) и карты (maps). Это удобно для возврата сложных значений.

 1@use "sass:map";
 2
 3// Example: Return a map of spacing scale
 4@function spacing-scale($base) {
 5  @return (
 6    'small': $base * 0.5,
 7    'medium': $base,
 8    'large': $base * 2
 9  );
10}
11
12$scale: spacing-scale(8px);
13
14.card {
15  margin-bottom: map.get($scale, 'medium');
16}
  • Функция возвращает отображение (map), и значения затем извлекаются с помощью map.get. Это позволяет поддерживать единую систему интервалов.

Функции с условиями и циклами

Внутри функций можно использовать @if, @else if, @else, @for, @each и @while. Можно создавать вычислительную логику с помощью условий и циклов.

 1// Example: Generate modular scale value using loop
 2@function modular-scale($step, $base: 1rem, $ratio: 1.25) {
 3  $result: $base;
 4  @if $step == 0 {
 5    @return $result;
 6  }
 7  @if $step > 0 {
 8    @for $i from 1 through $step {
 9      $result: $result * $ratio;
10    }
11  } @else {
12    @for $i from 1 through abs($step) {
13      $result: $result / $ratio;
14    }
15  }
16  @return $result;
17}
18
19.h1 {
20  font-size: modular-scale(3, 1rem, 1.333);
21}
  • Эта функция вычисляет модульную шкалу и умножает или делит в зависимости от положительных или отрицательных шагов. modular-scale(3, 1rem, 1.333) возвращает размер шрифта на три шага больше базового.

Обработка ошибок и предупреждений (@error, @warn)

Можно прекратить выполнение с @error при неверных аргументах или неожиданных операциях, и выводить предупреждения с помощью @warn. Цель — заранее предупредить пользователей о возможных проблемах.

 1@use "sass:math";
 2@use "sass:meta";
 3
 4// Example: Validate input and throw an error for invalid units
 5@function ensure-length($value) {
 6  @if meta.type-of($value) != 'number' or math.is-unitless($value) {
 7    @error "Expected a length with units, got #{$value}.";
 8  }
 9  @return $value;
10}
11
12// Valid input (should pass)
13.test-valid {
14  width: ensure-length(10px); // expect: 10px
15}
16
17// Invalid input (should throw error during compilation)
18// Uncomment the following to test error handling:
19//
20// .test-invalid {
21//   // expect error: "Expected a length with units, got 10."
22//   width: ensure-length(10);
23// }
  • Если передать недопустимые значения, при сборке появится ошибка, что облегчает поиск причины. Проверки внутри функций полезны для раннего обнаружения ошибок.

Создание функций для работы с цветами

В SASS можно комбинировать различные функции для работы с цветами и создавать собственную палитру. Это полезно для поддержания единой цветовой схемы во всём проекте.

 1@use "sass:color";
 2@use "sass:list";
 3
 4// Example: Generate a color palette (tints and shades) from a base color
 5@function palette($color, $steps: 5, $strength: 10%) {
 6  $colors: ();
 7  @for $i from 0 through $steps {
 8    $amount: $i * $strength;
 9    $shade: if($i == 0, $color, color.mix(black, $color, $amount));
10    $tint: color.mix(white, $color, $amount);
11    $colors: list.append($colors, $shade);
12    $colors: list.append($colors, $tint);
13  }
14  @return $colors;
15}
16
17$palette: palette(#3498db, 3, 15%);
18
19.btn {
20  background-color: list.nth($palette, 1);
21}
  • В этом примере функция color.mix используется для создания оттенков путём смешивания с чёрным или белым. Значения возвращаются в виде списка, и к ним можно обратиться с помощью list.nth.

Замечания по производительности и времени компиляции

Функции SASS вычисляются при компиляции. Сложные циклы, глубокая рекурсия или обширные операции с картами увеличивают время компиляции. Держите функции маленькими и простыми; при необходимости обрабатывайте сложные процессы вне SASS — в сборочных инструментах или препроцессорах.

Практическая подборка утилитарных функций

Вот несколько часто используемых утилитарных функций. Этот код создан для немедленного использования в реальных проектах.

 1@use "sass:math";
 2
 3// Example: Clamp a value between min and max
 4@function clamp-value($value, $min, $max) {
 5  @if $value < $min {
 6    @return $min;
 7  } @else if $value > $max {
 8    @return $max;
 9  }
10  @return $value;
11}
12
13// Example: Convert px to rem (with optional root size)
14@function px-to-rem($px, $root: 16px) {
15  @if math.unit($px) != "px" {
16    @error "px-to-rem requires a px value.";
17  }
18  @return ($px / $root) * 1rem;
19}
  • clamp-value устанавливает верхние и нижние пределы для значения, а px-to-rem преобразует пиксели в rem. Обе эти функции упрощают процессы, часто возникающие при адаптивной верстке.

Выбор между @function и миксинами (@mixin)

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

 1// Example: Function returns a value
 2@function border-radius-value($size) {
 3  @return $size * 1px;
 4}
 5
 6// Example: Mixin outputs properties
 7@mixin rounded($size) {
 8  border-radius: border-radius-value($size);
 9  -webkit-border-radius: border-radius-value($size);
10}
11.card {
12  @include rounded(8);
13}
  • Функции возвращают значения, такие как числа или цвета, для использования в других свойствах, а миксины напрямую вставляют группы свойств. Чёткое разделение при проектировании повышает удобство поддержки кода.

Обработка строк и нюансы формата вывода

Будьте осторожны при работе с числами с единицами и строками в SASS. Конкатенация строки с числом и единицей измерения может привести к неожиданному результату. По необходимости используйте unquote() или интерполяцию строк (#{}).

 1@use "sass:math";
 2
 3// Example: Safely create a CSS value string
 4@function px-percentage($px, $total) {
 5  $percent: math.div($px, $total) * 100;
 6  @return "#{$percent}%";
 7}
 8
 9// Safer with interpolation and math module
10@function px-percentage-safe($px, $total) {
11  $percent: math.div($px, $total) * 100;
12  // Round to 2 decimal places safely
13  $rounded: math.div(math.round($percent * 100), 100);
14  @return "#{$rounded}%";
15}
  • При возврате процентов как строк управляйте точностью с помощью интерполяции или round для большей наглядности. Чтобы избежать ошибок, всегда чётко управляйте типами данных при объединении результатов вычислений со строками.

Лучшие практики тестирования и документирования

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

 1@use "sass:math";
 2
 3// Example: Inline "tests" (partial usage examples)
 4// These can be compiled separately during development
 5
 6@function double($n) {
 7  @return $n * 2;
 8}
 9
10@function px-to-rem($px, $root: 16px) {
11  @if math.unit($px) != "px" {
12    @error "px-to-rem requires a px value.";
13  }
14  @return math.div($px, $root) * 1rem;
15}
16
17// Test double()
18.test-double {
19  width: double(12px); // expect 24px
20}
21
22// Test px-to-rem()
23.test-rem {
24  font-size: px-to-rem(18px, 18px); // expect 1rem
25}
26
27// --- Inline debug tests ---
28@debug "double(12px) => #{double(12px)} (expect 24px)";
29@debug "px-to-rem(18px, 18px) => #{px-to-rem(18px, 18px)} (expect 1rem)";
  • Оставляя комментарии с небольшими примерами «ожидаемого вывода», вы облегчаете обнаружение регрессий при последующем рефакторинге. Автоматическая компиляция в CI-среде с последующей визуальной проверкой вывода эффективна.

Резюме

Функции SASS — это мощный способ повысить повторное использование и согласованность стилей. Делайте их маленькими и простыми, обеспечивайте безопасность с помощью @error и @warn. Утилитарные функции для работы с цветами, отступами и преобразованием единиц удобно собирать в общую библиотеку. Чтобы избежать перегрузки при компиляции, при необходимости выносите сложную обработку на другие этапы сборки.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Операторы в SASS