Можно ли передать данные из HTML в CSS в виде переменных?

В HTML непосредственно нельзя передавать данные в CSS в виде переменных. Однако, существуют различные способы, которые позволяют создать эффект использования переменных в CSS, используя HTML и JavaScript.

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

HTML:

<div data-color="red">Красный блок</div>
<div data-color="blue">Синий блок</div>

CSS:

div[data-color="red"] {
  background-color: red;
}

div[data-color="blue"] {
  background-color: blue;
}

В этом примере мы определяем пользовательский атрибут data-color для каждого блока <div>. Затем мы используем этот атрибут в CSS для задания разных стилей каждому элементу.

Еще один способ - использование CSS переменных и JavaScript. В CSS переменные предваряются символом двоеточия и задаются с помощью функции var(). Затем эти переменные могут быть установлены или изменены с помощью JavaScript. Пример:

HTML:

<div id="myDiv">Блок</div>

CSS:

:root {
  --color: red;
}

#myDiv {
  background-color: var(--color);
}

JavaScript:

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

В этом примере мы определяем CSS переменную --color в селекторе :root, который является корневым элементом документа. Затем мы используем эту переменную для установки фона блока <div>. С помощью JavaScript мы изменяем значение переменной на blue.

Таким образом, хотя HTML сам по себе не предоставляет прямого механизма передачи данных в CSS в виде переменных, вы можете использовать пользовательские атрибуты или CSS переменные с помощью JavaScript, чтобы добиться подобного эффекта.