Имена переменных для Sass

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

Исправить недочеты в статье

Для того что бы исправить текст новости, просто выделите нужное место и нажмите ctrl + enter

Материал добавил

7FV

Связь со мной
Телеграм: aslan7f
Скайп: не указан
Добавил статей 26
Группа
Web Дизайнер
Немного обо мне
Всем привет ребят!
Предлагаю услуги по верстке сайтов, доработке уже существующих шаблонов, написание шаблонов с нуля.

Конечно же у вас возникает сразу вопрос, кто я, где мое портфолио и т.д.
Отвечу на этот вопрос:
Кто же я такой? - Я обычный растаман, который накурившись верстает сайты уже лет так 9, рисует иконки, визитки, банеры, логотипы, ретуширует фотографии.

Зарабатываю я на этом? - Скорей нет чем да. Это мое хобби, мне просто нравится все что связано с веб дизайном. Я не говорю что бесплатно все делаю,хотя порой если мне нравится проект и сам клиент как человек, тогда я могу бесплатно поддерживать, помогать с его проектом.

Добавить комментарий


@