CSS переменные (кастомные свойства)
Это не просто переменные, это кастомные свойства которые работают в рантайме по основным принципам CSS, таким как каскад и наследование. С их помощью, например, можно контролировать процесс загрузки/рендера страницы (см. Control CSS loading with custom properties ниже).
Базовый синтаксис
/* инициализация */
:root {
--main-bg-color: brown;
}
/* использование */
element {
background-color: var(--main-bg-color);
}
Взаимодействие из JS
// название css переменной
const PROP_NAME = '--font-size';
// чтение стилей и значения переменной
const styles = window.getComputedStyle(el);
const fontSize = parseInt(styles.getPropertyValue(PROP_NAME), 10);
// применение переменной
el.style.setProperty(PROP_NAME, fontSize + 5);