От автора: методы обратной связи очень важны в любом языке программирования. В JavaScript’е вы, возможно, используете console.log() или alert(). В PHP это var_dump() или print_r(). В Ruby вы можете воспользоваться debug или inspect. С помощью этих функций вы можете отлаживать любое значение в коде и узнать, что делает ваш код на любой стадии в заложенной вами логике.
В Sass для этого существует три директивы. Это @error, @warn и @debug. В этой статье мы рассмотрим, как их использовать, в каких случаях удобнее всего ими пользоваться и что они возвращают.
Базовый синтаксис и применение
Все три директивы имеют один синтаксис:
|
1 |
@directive "строка текста на выходе."; |
Если необходимо вставить значение переменной в строку, можно использовать стандартный синтаксис Sass для вставки переменной (#{$variable}), значение будет распечатано в строке. С помощью этого метода вы можете распечатать, как и название переменной, так и ее значение:
|
1 |
@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, или из ключей карты цветов:
Карта цветов:
|
1 2 3 4 5 6 |
$colors: ( brand-red: #c0392b, brand-blue: #2980b9, text-gray: #2c3e50, text-silver: #bdc3c7 ); |
Функция:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// Игнорировать `$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}`."; } } } |
Обращение:
|
1 2 3 |
.element { color: color-variation(brand-orange); } |
На выходе:
|
1 2 |
>> Неверное имя цвета: `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, чтобы помочь разработчику подготовиться к изменениям:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// Никто больше не использует вендорные префиксы для 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; } |
На выходе:
|
1 2 3 |
ПРЕДУПРЕЖДЕНИЕ: Миксин `border-radius()` будет удален в версии 2.0. строка 2 sass/test.scss строка 21 sass/test.scss |
Еще один хороший пример применения @warn это соблюдение стандартов. Вы можете написать функцию, которая хорошо работает, как с пикселями, так и с rem единицами. Но вы хотите, чтобы в вашей команде разработчиков все использовали только rem. Ниже приведен пример директивы @warn для коллег в вашей команде:
|
1 2 3 4 5 6 7 8 |
@function do-math($input) { @if unit($input) == 'px' { @warn "Пожалуйста, используйте rem единицы в функции `do-math()`."; // вычисляете в пикселях и @return значение; } @else { // вычисляете в rem и @return значение; } } |
На выходе:
|
1 2 3 |
WARNING: Пожалуйста, используйте rem единицы в функции `do-math()`. Строка 3 sass/test.scss Строка 12 sass/test.scss |
Если вам интересно – Директива @debug
Директива @debug наименее назойливая из трех. Она распечатывает в консоли разработчика значение любого Sass выражения (переменная, математическое выражение и т.д.). Она бесполезна на open source или в командных библиотеках, но идеальна для личной отладки. Если вы погрузились с головой в вычисления и вам нужно знать, что содержится в ваших переменных, используйте @debug. Обращение:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$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 "моя строка."; // строка } |
На выходе:
|
1 2 3 4 5 |
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
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
