23 Вересень 2015
3 700
Рубрика: код

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

Тепер я хочу бачити коментарі 2