Переменные CSS

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

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

Объявление переменной

Переменная объявляется внутри селектора, который служит ее областью видимости. Если требуется создать глобальную переменную, объявлять ее необходимо внутри селектора * или :root.

*{
    --myСolor: #7EB436;
}

Объявление переменной выглядит как обычная CSS пара свойство:значение. Имя переменной начинается с двух дефисов.

Переменные в CSS регистрозависимы и не могут быть пустыми.

Использование переменной

Переменную можно подставить вместо обычного значения любого свойства с помощью ключевого слова var:

element{
  background-color: var(--myColor);
}

Значение переменной должно соответствовать тому свойству, которое она определяет. Так, переменная myColor, содержащая цвет, не может определять свойство width или border-radius. В этом случае будет сгенерирована ошибка и подставится дефолтное значение.

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

element{
  background-color: var(--myColor, green);
}

Теперь, если переменная myColor не будет найдена, задний фон элемента окрасится в зеленый.

Единицы измерения

Единицы измерения (например px) необходимо указывать в самой переменной, так как конкатенации в CSS нет.

/***правильный вариант***/
*{
  --mySize:100px;
}
element{
  width:var(--mySize);
  height:var(--mySize);
}

/***неправильный вариант***/
*{
  --mySize:100;
}
element{
  width:var(--mySize) + "px";
}

Переменные и медиазапросы

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

element{
  --mySize: 200px;
  width: var(--mySize);
}

@media (max-width:700px){
  element{
    --mySize:100px;
  }
}

Ширина элемента на маленьком экране пересчитается сама, учитывая переопределенное значение переменной.

Анимация

Непосредственная анимация переменных значений в CSS невозможна, так как заранее не известно, какой тип данных находится в переменной. Можно поэкспериментировать со свойством transition, для некоторых значений, оно может сработать.