Как передать переменную в CSS

Нельзя передать переменную в CSS напрямую из JavaScript. Однако, с помощью CSS переменных (CSS variables) можно создать переменные в CSS, которые могут быть заданы и изменены в CSS, а затем использованы в различных стилях.

Пример:

CSS:

:root {
  --main-color: blue;
}

h1 {
  color: var(--main-color);
}

JavaScript:

document.documentElement.style.setProperty('--main-color', 'red');

В этом примере мы создали переменную --main-color в корневом элементе (:root) и использовали ее в стиле для заголовка h1. Затем, с помощью JavaScript, мы изменили значение переменной на red.