Вибір імен змінних — важливе завдання для будь-якого, хто хоче, щоб його код можна було легко читати і масштабувати. Мені зустрілася цікава стаття про вибір імен змінних для 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.