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

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

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

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

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

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

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Если необходимо вставить значение переменной в строку, можно использовать стандартный синтаксис Sass для вставки переменной (#{$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, или из ключей карты цветов:

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

Функция:

Обращение:

На выходе:

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

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

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

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

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

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

На выходе:

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

На выходе:

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

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

На выходе:

Заключение

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

Автор: James Steinbach

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

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

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с полного нуля

Получить

Метки:

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree