Чтобы создать переменную в CSS, нужно использовать функцию var(). Это выглядит примерно так:

:root {
  --primary-color: #ff0000;
}

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

В этом примере мы создаем переменную —primary-color в корневом селекторе :root и устанавливаем ее значение в красный цвет. Далее мы используем эту переменную в стиле заголовка h1, задавая ему цвет переменной с помощью функции var().

Обратите внимание на синтаксис создания переменной: имя переменной начинается с двух дефисов (—), за которыми следует имя переменной. Далее идет двоеточие и значение переменной. Мы можем использовать это значение позже в CSS, обернув его в функцию var().

Также важно отметить, что переменные в CSS работают только в том блоке стилей, в котором они определены. Если вы хотите использовать переменную в другом блоке стилей, вам нужно определить ее там же.