Як правильно давати імена змінним з кольорами в Sass

Верстальники, що користуються змінними в Sass (це сьогодні вже мало не всі верстальники) кожен день мають справу з іменами змінних. Зокрема, важливо правильно називати імена кольорів, щоб по-перше, ти сам міг зрозуміти, відкривши свій код за півроку, що цей колір означає.

А по-друге, дати зрозуміти іншим розробникам, що опиняться посеред твого коду, що там відбувається.

Навіщо ці правила

Найменування кольорів — дуже широка тема, хоча здавалося б, що все просто. Якщо колір червоний — назви його $red і йди на перекур. А повернувшись з перекуру, побачиш в Slack повідомлення від ПМ, де говориться, що віднині головний колір — зелений і треба його поміняти в усьому проекту.

Пам’ятаючи переваги змінних в Sass, ми чудово знаємо — досить змінити значення однієї змінної і вона зміниться в усьому проекті. І все добре, можна йти на каву. Але згодом тестер або колега запитає, чому зелений колір називається у вас $red.

Ось тут ви постаєте перед проблемою, як саме треба називати такі змінні таким чином, щоб їх імена лишались актуальними навіть з притрушеними на голову замовниками, які міняють точку зору кожного тижня.

З іншого боку, зелений це завжди green, темний чи світлий. Базуючись на цих знаннях, ми й розглянемо, як можна називати змінні.

Якщо ви зараз прочитали щось нове, тоді вам час перечитати першу статтю про основи Sass.

Дві палітри

Простим рішенням в такому випадку буде використання двох палітр. Перша — головна.

Складіть список змінних, які так чи інакше з’являються в проекті. Для імен використовуйте сематично логічні назви. Наприклад:

• brand-color для основного кольору (ніяк не light-green)
• border-color для кольору бордерів (забудьте поки про light-gray)

Зазвичай майже всі так і роблять. Якщо ні — читайте цю статтю про назви змінних.

Далі створіть локальний список з назвами кольорів, які ви будете використовувати в проекті. І далі скрізь де потрібно використовуйте саме змінні з кольором замість самого кольору.

Ось приклад:

// Локальна палітра
$ralph-red: #C42E2E; 

// Глобальна палітра 
$primary-color: $ralph-red;

Перевага такого підходу в тому, що всі глобальні кольори зберігаються в одному місці, де їх легко знайти і поміняти. З іншого боку, семантичність імен зберігається, тому ваш код, відкритий кимось іншим, буде зрозумілим.

Якщо ні — давайте посилання на цю статтю.

Ви знаєте не гірше за мене, що зазвичай у проекті не потрібно більше, аніж 10 кольорів. Частіше — 3-4. Тому локальна «кольорова» палітра буде досить стрункою і легкою для розуміння.

Ось ще невеликий і трохи складніший приклад:

// локальна палітра
$ralph-red: #C42E2E; 

// глобальні змінні
$primary-color: $ralph-red; 
$title-color: $primary-color

Де брати імена кольорів?

Добре, якщо з green або dark-red все більш-менш зрозуміло, то як бути з відтінками і кольорами на кшталт «лососевого» чи «ванільного». Ця проблема ламає мозок дівчатам-фронтендерам. Їх небагато, але їх завчасно шкода. Бо колір рожевого світанку, названий попереднім програмістом RED, викликає бажання знайти його і подивитись в його нерозумні очі.

Але то лірика, бо для визначення назв імен кольорів є чудові програми, які все зроблять за вас. Як завжди в цьому світі, є чудові безкоштовні розробки.

SIP

Мабуть, найзручніша з усіх, це SIP (під mac os).

Якщо не помиляюсь, написана двома братами італійцями, є дуже простою в роботі і базовий функціонал є безплатним. Щось додатково можна купити за 10 євро, але я туди поки не ліз :).

В налаштуваннях можна вказати, які типи назв для кольорів потрібні, і як називати hex-варіанти кодів для html. Дуже зручний інструмент у повсякденній роботі.

Так, все ж мені варто його купити.

Програма зберігає історію кольорів з їх іменами, тож для того, щоб дізнатись точну назву кольору, просто відкрийте історію і знайдіть там потрібний колір.

Profit!

Kromatic

Мабуть, ще простіша у користуванні і повністю безкоштовна утиліта для Mac — Kromatic від шведських розробників. Дозволяє вибирати кольори і бачити їх імена.

Для Windows можна використовувати:

• ColorZilla;
• JustColorPicker;
• Colblindor.

Правильно називаючи кольори і вибираючи для них сематичні назви, ви зробите свій sass-код більш зрозумілим і готовим до розробки іншими програмістами, тож бадаю успіхів!