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

Як вибирати круті імена змінних

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

Але вибір змінних — непросте завдання!

Якщо втратити пильність, імена змінних вийдуть з-під контролю і в проекті настане хаос. Якщо ви не пам’ятаєте, за що відповідають ваші змінні, то шкоди від них буде більше, ніж користі.

Користуючись цими простими правилами, у вас буде повний контроль і спокій за проект.

Семантичні імена

Уявіть, що головний колір в фірмовому стилі вашого проекту — червоний, тому ви називаєте його $red. Через півроку керівник проекту і відділ маркетингу в процесі вивчення ринку дізнаються, що тепер в тренді синій. Так що фірмовий стиль вирішують поміняти і новим фірмовим кольором зробити синій.

Ви легко поміняєте значення змінної $red, але її ім’я тепер буде вводити в ступор всіх, хто зустріне її в коді.

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

// Поганий приклад
$red: red;
$yellow: yellow;

// Вже краще
$brand-color: red;
$accent-color: yellow;

Свої правила імен

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

Наприклад, ви можете додавати -color до всіх значень назв квітів:

// Основні кольори
$base-color: #333;
$brand-color: red;
$brand-80-color: rgba($color-brand, 0.8);
$accent-color: yellow;

Або додавайте префікс для позначення блоків, в яких вони використовуються:

// Header
$header-height: 100px;
$header-background-color: $color-brand;

// Footer
$footer-height: 200px;
$footer-background-color: #aaa;

Головний конфіг

Я люблю зберігати всі змінні проекту в одному файлі під назвою _config.scss. Я додаю цей файл в основний набір стилів через @import. Таким чином, будь-який файл, який імпортується після конфіга вже матиме доступ до всіх його змінним.

@import base/config;
@import base/typography;
@import base/utilities;
@import modules/button;

Підсумок

Є безліч думок з приводу імен змінних в Sass, але насправді важливо знайти свої правила, які підійдуть особисто вам і вашій команді. Вибір правильних імен дозволить вам легко і швидко вносити зміни в стилі вашого проекту.

Коменти

Дамир

автор пишет, что переменные хранит в файле “_config.scss”, а подключает его через строку “@import base/config;”
может будет правильней подключать через “@import base/_config.scss;”?

Назар Токарь

.scss можно не указывать, а подчеркивание в имени файла отвечает за то, что он не будет компилироваться в отдельный css.