Как пользоваться CSS переменными в Chrome 49

Переменные, являются незаменимой частью профессионального программирования. Только представьте, необходимость вручную переопределять значения для каждого отдельного элемента, а не изменять их только одной переменной, из одной точки программы.

С появлением Chrome 49-ой версии, этот браузер стал поддерживать CSS переменные в виде пользовательских свойств и стилей. И это оказалось безумно полезно для многих веб-разработчиков. О важности CSS переменных в веб-разработке, вы можете узнать из этой статьи. А сейчас, следует пояснить, как можно их применять.

CSS переменные, подразумевают под собой кастомные свойства, возможность применения которых, может быть полезна в разных частях кода. Код может выглядеть примерно так:

:root {
--index-color: #06c;
}
#foo h1 {
color: var(--index-color);
}

Здесь ‘--index-color’ играет роль свободно определяемой переменной пользовательского свойства, назвать ее можно, как угодно. Затем, можно указывать эту переменную в любом элементе на веб странице, и он будет иметь цвет, заданный в переменной. Указав эту переменную на нужных частях сайта, можно в любой момент изменить их цвет, просто задав иное значение переменной.