Применение Sass директив @error, @warn и @debug

Применение Sass директив @error, @warn и @debug

От автора: методы обратной связи очень важны в любом языке программирования. В JavaScript’е вы, возможно, используете console.log() или alert(). В PHP это var_dump() или print_r(). В Ruby вы можете воспользоваться debug или inspect. С помощью этих функций вы можете отлаживать любое значение в коде и узнать, что делает ваш код на любой стадии в заложенной вами логике.

В Sass для этого существует три директивы. Это @error, @warn и @debug. В этой статье мы рассмотрим, как их использовать, в каких случаях удобнее всего ими пользоваться и что они возвращают.

Базовый синтаксис и применение

Все три директивы имеют один синтаксис:

@directive "строка текста на выходе.";

Если необходимо вставить значение переменной в строку, можно использовать стандартный синтаксис Sass для вставки переменной (#{$variable}), значение будет распечатано в строке. С помощью этого метода вы можете распечатать, как и название переменной, так и ее значение:

@error "Простите, но `#{$variable}` неверное значение для переменной $variable.";

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

Если разработчик допустит ошибку при использовании вашего Sass кода, данные директивы пошлют сообщение компилятору, а компилятор в свою очередь покажет это сообщение разработчику. К примеру, таск раннеры с визуальным интерфейсом (типа CodeKit) отобразят системное уведомление об ошибке. Уведомления в Grunt и Gulp тоже достаточно хороши.

Если разработчик компилирует через командную строку (Sass, Compass, Grunt или Gulp), сообщение вероятнее всего отобразится в консоли (Terminal, iTerm2, Putty и т.д.). Если же вы пишите Sass код онлайн с помощью Sassmeister или Codepen, то вы ограничены в выборе инструментов для обратной связи. Уведомление об ошибке можно получить прямо в вашем редакторе или в тексте в отдельном окне.

Теперь мы знаем, как писать @error, @warn и @debug сообщения, и где они отображаются для разработчиков. Рассмотрим в чем разница между этими директивами, и какие из них лучше всего применять в конкретных ситуациях.

Остановить все – Директива @error

Sass директива @error полностью останавливает компилятор Sass и посылает ему на выход строку текста с фатальной ошибкой. Используйте эту команду, если требуется остановить разработчика и принудить исправить ее. Идеальный способ сообщить программисту, что он допустил ошибку или ввел неверное значение переменной. Sass покажет строку с фатальной ошибкой вместе с сообщением @error на выходе. С его помощью удобно проверять правильность входных переменных в миксинах или функциях.

Обратите внимание: Если у вас компилятор старее версии Sass 3.4 или LibSass 3.1, @error не будет работать. В таком случае можно использовать функцию log() для эмуляции работы @error.

В качестве примера возьмем ситуацию, вы написали функцию, которая принимает на вход определенный формат значений и вычисляет их. Вы можете проверить их на правильность и применить @error, чтобы остановить компилятор и предупредить разработчика об ошибке, которую нельзя оставить без внимания. Если же вы написали функцию, основанную на паре ключ/значение из карты цветов (массива), @error может проверить ключ на существование.

Этот Sass инструмент по управлению цветом использует @error для проверки того, что разработчик использует имена цветов, которые существуют в CSS, или из ключей карты цветов:

Карта цветов:

$colors: (
  brand-red: #c0392b,
  brand-blue: #2980b9,
  text-gray: #2c3e50,
  text-silver: #bdc3c7
);

Функция:

// Игнорировать `$variation: false`,
// или для больших подробностей читайте статью.
				
@function color-variation($color, $variation: false) {
  @if map-has-key($colors, $color) {
    $color: map-get($colors, $color);
  } @else {
    @if type-of($color) != color {
      @error "Invalid color name: `#{$color}`.";
    }
  }
}

Обращение:

.element {
  color: color-variation(brand-orange);
}

На выходе:

>> Неверное имя цвета: `brand-orange`.
>>   строка 9  символ 7  sass/test.scss

В данном примере, если разработчик вызывает функцию color-variation() со строкой, не отвечающей стандартам CSS, и если она не является ключом из карты цветов $colors, то Sass не сможет применить цвет. @error дает разработчику необходимую информацию.

Не забудьте – Директива @warn

Директива @warn менее серьезна, чем @error. Она посылает сообщение компилятору, чтобы разработчик его прочитал, но компилятор продолжает свою работу. В то время как @error применяется для устранения ошибок и полностью останавливает функции или миксины, @warn можно использовать для предупреждения разработчика или чтобы предложить ему что-то изменить.

Обратите внимание: Sass разработчики, использующие флаг —quiet при компиляции не увидят директиву @warn. Если все же нужно видеть сообщения, то можно использовать @error. Обычно редко отключают директиву @warn, но все же это возможно.

Sass также укажет строку с предупреждением, чтобы помочь разработчику найти и исправить код. К примеру, у вас есть библиотека миксинов, и вы планируете исключить парочку из будущих релизов. Моно воспользоваться директивой @warn, чтобы помочь разработчику подготовиться к изменениям:

// Никто больше не использует вендорные префиксы для border-radius ;) 
// значит, удалим его из нашей библиотеки:

@mixin border-radius($radius) {
  @warn "Миксин `border-radius()` будет удален в версии 2.0.";
									
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -o-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

На выходе:

ПРЕДУПРЕЖДЕНИЕ: Миксин `border-radius()` будет удален в версии 2.0.
  строка 2 sass/test.scss
  строка 21 sass/test.scss

Еще один хороший пример применения @warn это соблюдение стандартов. Вы можете написать функцию, которая хорошо работает, как с пикселями, так и с rem единицами. Но вы хотите, чтобы в вашей команде разработчиков все использовали только rem. Ниже приведен пример директивы @warn для коллег в вашей команде:

@function do-math($input) {
  @if unit($input) == 'px' {
    @warn "Пожалуйста, используйте rem единицы в функции `do-math()`.";
    // вычисляете в пикселях и @return значение;
  } @else {
    // вычисляете в rem и @return значение;
  }
}

На выходе:

WARNING: Пожалуйста, используйте rem единицы в функции `do-math()`.
  Строка 3 sass/test.scss
  Строка 12 sass/test.scss

Если вам интересно – Директива @debug

Директива @debug наименее назойливая из трех. Она распечатывает в консоли разработчика значение любого Sass выражения (переменная, математическое выражение и т.д.). Она бесполезна на open source или в командных библиотеках, но идеальна для личной отладки. Если вы погрузились с головой в вычисления и вам нужно знать, что содержится в ваших переменных, используйте @debug. Обращение:

$color-blue: #1c94c6;
$font-sizes: sm, p, bq, heading, hero;
$colors: (
  brand-red: #c0392b,
  brand-blue: #2980b9,
  text-gray: #2c3e50,
  text-silver: #bdc3c7
);

.element {
  @debug $color-blue; // единственное значение
  @debug $font-sizes; // список
  @debug $colors; // карта
  @debug 4em * 3; // математическое выражение
  @debug "моя строка."; // строка
}

На выходе:

sass/test.scss:5: DEBUG: #1c94c6
sass/test.scss:6: DEBUG: sm, p, bq, heading, hero
sass/test.scss:7: DEBUG: (brand-red: #c0392b, brand-blue: #2980b9, text-gray: #2c3e50, text-silver: #bdc3c7)
sass/test.scss:8: DEBUG: 12em
sass/test.scss:9: DEBUG: моя строка.

Заключение

Программировать без обратной связи было бы ужасным занятием. К счастью, в Sass есть множество директив, которые могут посылать сообщения компилятору и помогать разработчикам избегать ошибок в коде, соблюдая стандарты. Вы можете использовать @error, @warn, и @debug, чтобы сэкономить время себе и любому другому, кто использует ваш код.

Автор: James Steinbach

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree