Введение в CSS переменных

Единственным качеством, которым должен обладать язык, чтобы претендовать на статус языка программирования, это переменные. Они считаются невероятно полезными, экономят разработчикам кучу часов и сил. Кроме того, переменные способны всестороннее улучшить процесс написания кода.

Это именно то, чего в CSS не хватало. Такие динозавры, как Sass и Less использовали переменные, но в стандартной CSS никогда не было переменных. До сегодняшнего дня.

Они долго маячили на горизонте, но лишь недавно переменные начали внедряться в CSS. Итак, как же они работают?

Поддержка браузеров

В настоящее время переменные CSS поддерживаются только Firefox Nightly. И в действительности мы не можем их использовать. Тем не менее, не смотря на то, что они ещё очень и очень сырые (в состоянии бета-тестивания) мы все с нетерпением ожидаем, что они появятся в нашей жизни в ближайшее время.

Для браузеров на движке Webkit уже есть путь для получения переменных. Кроме того, ещё они доступны для некоторых версий Chrome, которые активируются через flag в chrome://flags и с помощью префикса -webkit-.

Что касается IE, к сожалению, мы должны подождать. Посмотрим, что же готовит нам релиз грядущий.

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

Мы все прекрасно знаем, как работают переменные, поэтому только синтаксис претерпел некоторые изменения. Вот как мы будем объявим переменные в CSS:

	var-variable-name: value;

Глобальные переменные

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

:root {
   var-blue-color: #2980A6;
   var-text-color: #E0E0E0;
}

Я использую root псевдо элемент из-за того, что интерфейс верхнего уровня в DOM будет тот, который держит эти переменные. А они, в свою очередь, будут работать вниз по дереву тегов DOM для всех наших элементов.

Когда дело доходит до применения переменных, мы используем функцию var() для вызова переменной. Это можно сделать так:

.test {
    background-color: var(blue-color);
}
p {
    color: var(text-color);
}

После того, как мы объявили переменную в корне документа, теперь мы вправе использовать её в любом месте.

Контекстные переменные

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

.one {
    var-blue-color: #004F70;
}
.one a {
    color: var(blue-color);
}

В данном конкретном примере якорные теги унаследует новые значения, которые мы поставили в их родительском элементе. Тем не менее, ничего за пределами этого div не будет использовать значения, заданные в корневом элементе.

Вывод

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

• Урок подготовлен: командой DwStroy.ru
• Источник: http://www.developerdrive.com/2014/01/introducing-css-variables/

1 предыдущая статья