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

    Поширити у Фейсбуці
    Надіслати у Messenger
    Зберегти в Pocket
    Надіслати в Telegram
    Надіслати у WhatsApp

    Додати коментар

    Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

    Ви вказали некоректні логін або пароль

    Вибачте, для коментування необхідно увійти.

    2 коментаря

    спочатку нові
    за рейтингом спочатку нові за хронологією

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

    может будет правильней подключать через "@import base/_config.scss;"?

    Автор
    Назар Токар

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