Articles
Введение в SASS/SCSS
Обработка ошибок в SASS

Обработка ошибок в SASS

В этой статье объясняется обработка ошибок в SASS.

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

YouTube Video

Обработка ошибок в SASS

Что такое «обработка ошибок» в SASS?

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

В SASS обработка ошибок — это не только «остановка при возникновении неисправности», но и способ выразить предположения дизайна прямо в коде. Для этого существует в основном четыре метода.

Немедленно останавливает компиляцию при обнаружении состояния, не допускаемого по дизайну.

Уведомляет о проблемах в виде предупреждений, но компиляция продолжается.

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

  • Ограничивающие условия (@if) Заранее проверяет входные значения и предусловия, чтобы предотвратить возникновение проблем.

@error: Надёжно останавливает критические ошибки

Используйте @error для состояний, абсолютно недопустимых в вашем дизайне. Если передано неверное значение, компиляция немедленно завершается с ошибкой.

1@mixin set-width($width) {
2  @if type-of($width) != number {
3    @error "Width must be a number.";
4  }
5
6  width: $width;
7}
  • Этот миксин останавливает сборку, если ему передано что-либо кроме числа. Это очень эффективно как «последний рубеж защиты» от некорректного использования.

Практическое использование @error, включая проверку единиц измерения

Даже если это число, неправильная единица измерения может вызвать проблемы. В SASS можно использовать функцию unit() для проверки единиц измерения.

1@mixin set-padding($value) {
2  @if unit($value) != "px" {
3    @error "Padding must be specified in px.";
4  }
5
6  padding: $value;
7}
  • Таким образом, передача по ошибке значения типа 1rem или % будет обнаружена немедленно. Очень важно, что вы можете обеспечивать выполнение правил дизайна через код.

@warn: Для уведомлений об устаревании и предупреждений

@warn используется для уведомления о нежелательных ситуациях, которые пока не приводят к ошибкам. Так как CSS по-прежнему генерируется, это подходит для постепенного перехода.

1@mixin legacy-color($color) {
2  @warn "legacy-color is deprecated. Use theme-color instead.";
3
4  color: $color;
5}
  • Этот миксин выводит предупреждение, не ломая существующий код. Это особенно эффективно при рефакторинге больших проектов.

Шаблон для вывода условных предупреждений

Это становится более полезным в сочетании с проверкой диапазона значений.

1@mixin set-opacity($value) {
2  @if $value < 0 or $value > 1 {
3    @warn "Opacity should be between 0 and 1.";
4  }
5
6  opacity: $value;
7}
  • Вы можете уведомлять о проблемах в дизайне, не останавливая процесс разработки. Преимущество @warn в том, что вы можете выбрать «уровень строгости».

@debug: Визуализация потока значений

@debug — больше инструмент наблюдения для поиска неполадок, нежели обработчик ошибок. Вы можете проверить результаты вычислений и значения переменных.

1$base-size: 8px;
2$spacing: $base-size * 3;
3
4@debug $spacing;
  • Так как значения выводятся во время компиляции, это помогает проверить сложную логику вычислений. Не оставляйте его в боевом коде; используйте только для анализа и отладки.

Проектирование с использованием защитных условий (@if) — самое важное

На практике важнее всего проектировать так, чтобы заранее проверять входные значения, прежде чем обращаться к @error или @warn.

1@mixin grid-columns($count) {
2  @if type-of($count) != number or $count <= 0 {
3    @error "Column count must be a positive number.";
4  }
5
6  grid-template-columns: repeat($count, 1fr);
7}
  • Явно задавая такие «правильные предусловия», вы делаете миксины и функции самодокументируемыми.

Обработка ошибок в функциях (@function)

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

1@function divide($a, $b) {
2  @if $b == 0 {
3    @error "Division by zero is not allowed.";
4  }
5
6  @return $a / $b;
7}
  • Так как вы можете выявить ошибочную логику до генерации CSS, это повышает надёжность системы дизайна.

Рекомендации по использованию на практике

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

  • Когда явное нарушение дизайна или ошибка обнаружены Используйте @error. Если генерировать CSS в некорректном состоянии, это сразу приводит к ошибкам, поэтому компиляция прекращается немедленно.

  • Когда нужно уведомить об устаревании или просто предупредить Используйте @warn. Вы можете работать, не ломая существующий и переходящий код, одновременно информируя о будущих проблемах.

  • Когда хотите убедиться в правильности потока значений или результатов вычислений Используйте @debug. Это эффективно как временное средство для проверки логики или поиска причин.

  • Когда нужно проверить все предусловия, такие как входные значения или условия использования Используйте защитные условия с помощью @if. Явно выражая предположения, можно предотвратить проблемы до их возникновения.

Поскольку SASS позволяет «написать практически всё, что угодно», чёткое определение нежелательных состояний в коде в перспективе приводит к более поддерживаемым и менее подверженным ошибкам стилям.

Резюме

Обработка ошибок в SASS — это механизм для явного выражения и неуклонного соблюдения предположений и правил оформления стилей в коде.

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

Понимая и правильно используя эти методы, вы превращаете SASS не просто в расширение CSS, а в надёжный язык проектирования, способный выражать намерения и ограничения.

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

YouTube Video

SASS и BEM