Почему не работает css переменная?

Question

[Артем Лукьянов]

Не работает css переменная цвета.
Если просто поставить значение переменной вместо переменной то все работает.
css:

:root {
  --сolor-main: #ff00ff;
  --padding: 10px;
}

button {
  padding: 0;
  border: none;
  font: inherit;
  background-color: transparent;
  cursor: pointer;
}

.button {
  color: var(--color-main);
  padding: var(--padding);
}

.button:hover {
  background-color: var(--color-main);
}

Что не так?

Comments

[Илья Свиридов]

Синтаксис верный, смотри по коду

Answer 1

[Илья Свиридов]

:root {
  /* Вместо буквы c - английской у тебя стоит с - русская, твой IDE не подсвечивает это */
  --сolor-main: #ff00ff;

Проверяй:
Твой вариант: --сolor-main: #ff00ff;
Мой вариант: --color-main: #ff00ff;

Comments

[Артем Лукьянов]

Да, vs code такое делать похоже не умеет)

[Илья Свиридов]

Артем Лукьянов, умеет с использованием расширения