Начинаем работать с переменными CSS - часть 1

Вступление

Эта заметка предназначена для front-end разработчиков среднего уровня (или дизайнеров, способных писать код). Предполагается, что у вы знакомы с CSS, HTML и немного с JavaScript.

Что такое переменные (или CSS переменные)?

В целом, переменная – это контейнер, в котором хранится некоторое значение, к переменной можно обращаться в блоке кода и получать ее значение. В CSS, как в языках программирования, переменные ведут себя аналогично.

Синтаксис

Общий синтаксис для переменных CSS показан ниже:

	/*Объявление переменных*/
	:root{
	--sans-serif: "Helvetica", Arial, sans-serif;
	--serif: "Georgia", Cambria, serif;
	}
	/*Использование переменных*/
	h1,h2,h3,h4,h5,h6{
	font-family: var(--san-serif);
	}
	p, ul, dl, ol, a{
	font-family: var(--serif);
	}

Пояснение синтаксиса

Объявление переменной начинается с символов -- - префикса, за которым следует имя переменной. Переменная будет доступна в .CSS-файле или .HTML-файле (при использовании инлайн-стилей) совместно с функцией var. Например, переменная с именем “color” и значением “blue” может быть объявлена как --color: blue и может быть доступна как var(--color).

Не путайте с синтаксисом JavaScript. В JavaScript var используется для объявления переменных, а в CSS var используется для доступа к значению переменной.

Давайте рассмотрим пример, представленный ниже:

	<div class="block bright">
	  <h2>Bright</h2>
	</div>
	<div class="block dark">
	  <h2>Dark</h2>
	</div>

	* {
	  box-sizing: border-box;
	  font-family: system-ui, sans-serif;
	  text-align: center;
	}
	/*Объявление переменных*/
	:root {
	  --color-bright: #FFEAEA;
	  --color-dark: #060130;
	}
	.block {
	  margin: 10px;
	  min-width: 160px;
	  padding: 45px;
	  display: inline-block;
	}
	/*Использованте переменных*/
	.bright {
	  color: var(--color-dark);
	  background: var(--color-bright);
	}
	.dark {
	  color: var(--color-bright);
	  background: var(--color-dark);
	}

Мы объявили 2 переменные с именами --color-dark и --color-bright. Далее мы обращаемся к ним и получаем значение обеих переменных в классах bright и dark. CSS-переменные можно использовать следующим образом: вместо того, чтобы указывать одни и те же значения CSS-свойств многократно, мы просто ссылаемся на переменные.

Какие проблемы возникают с переменные CSS или пользовательскими свойствами?

Давайте рассмотрим преимущества использования CSS-переменных.

• Масштабируемый и читаемый код
  При использовании традиционного CSS, мы довольно часто повторяем значения свойств. Это делает наш код не только «топорным», но и трудночитаемым, а также его становится сложно поддерживать при увеличении его объема.
• Реактивные элементы
  Однажды нам может понадобиться изменить значение переменной, в тот же момент соответствующие HTML-элементы обновятся и поменяют свой внешний вид в соответствии с новыми значениями переменной, что мы увидим в браузере.
• Ускорение рабочего процесса
  CSS переменные позволяют немного ускорить процесс разработки. Если значение свойства требуется поменять, нам будет нужно всего лишь изменить значение переменной. На это уйдет меньше времени, чем на поиск в коде каждого упоминания свойства и его замену.
• Продвинутые математические расчеты
  Вы можете выполнять базовые вычисления с использованием основных математических операторов в CSS, используя функцию calc(). Функции calc() может быть передан только 1 параметр с двумя операндами и одним оператором, результат выполнения становится значением свойства CSS. Поддерживаются основные математические операции: сложение(+) , вычитание(-), умножение(*) и деление (/).

Общий синтаксис функции calc(): calc(Операнд1 [Оператор] Операнд2);

Хорошо, что операндом функции calc() может быть CSS переменная. Это делает функцию calc() еще более динамичной и полезной.

Поддержка браузерами

Переменные CSS могут использоваться только в современных браузерах и если вы ведете разработку с учетом устаревших браузеров, вам следует отказаться от использования CSS-переменных.

Но почему нет? В наши дни люди отправляют экспедицию на Марс, так что по крайней мере вы должны быть тем либералом работы с кодом.

Надеюсь, что теперь у вас есть общее понимание того, как работают CSS-переменные (пользовательские свойства) и это сделает ваш рабочий процесс масштабируемым и более продуктивным.

Вуаля! Часть 2 («Понимание области видимости в переменных CSS») уже опубликована и доступна для прочтения.

Оригинал статьи: https://webkul.com/blog/getting-started-css-variables/

Перевод: Земсков Матвей