Застосування Sass директив @error, @warn і @debug

21

Від автора: методи зворотного зв’язку дуже важливі в будь-якій мові програмування. У 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 Застосування Sass директив @error, @warn і @debug
// означає, видалимо його з нашої бібліотеки:
@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, щоб заощадити час собі і всім іншим, хто використовує ваш код.