Переменные в чистом CSS (без какого-либо препроцессора) сегодня поддерживаются большинством современных браузеров. Официально они называются пользовательскими свойствами. Они позволяют избежать большого количества повторений, связанных с традиционным синтаксисом CSS, и, в отличие от переменных с препроцессорами, их можно изменять динамически.
Вот как вы можете использовать пользовательские CSS-свойства:
/* Declaration */
some-element {
--my-bg-color: #F9EC31;
}
/* Using it */
some-element {
background-color: var(--my-bg-color);
}
Также при написании переменной можно указать запасное значение, которое будет использоваться, если переменная не была определена:
some-element {
background-color: var(--my-bg-color, papayawhip);
}
Псевдокласс :root и переменные
Вот типичный вариант использования: определить переменные в псевдоклассе :root, а затем применить его везде, где необходимо данное значение. Например:
:root {
--funky-shadow: 3px 3px 10px brown;
}
.ugly-box {
box-shadow: var(--funky-shadow);
}
Функция calc()
Также вы можете использовать функцию calc() со значениями переменных.
:root {
--special-padding: 1.5em;
}
.pandora-box {
padding-bottom: calc(var(--special-padding) + 1em);
}
Браузерная поддержка
Myth – хороший вариант начать использовать переменные CSS уже сегодня.
Данные о поддержке функции css-переменных основными браузерами вы можете найти здесь.
Читайте также: Управление размерами изображений в CSS