CSS Переменные: Почему это так важно?

Разрабатывая веб-приложение, выделять набор фирменных цветов, которые будут повторно использоваться во всем внешнем виде - стандартная практика. К сожалению, каждый раз повторять эти значения, в вашем CSS - это трата времени и вероятность совершить ошибку. А если в какой-то момент, один из цветов должен быть изменен – это просто кошмар. Конечно, можно применить инструмент «найти и заменить все», но на большом проекте, это может быть опасно.

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

Пользовательские свойства CSS, добавляют две новые функции.

1. Это способность присвоить произвольные значения CSS свойству, подписав своим именем.

:root {
--main-color: #06c;
}
#foo h1 {

color: var(--main-color);

2. Это синтаксис для пользовательского свойства.

--header-color: #06c;