для успешного использования переменных в css, можно придерживатся правила задавать значение по умолчанию величиной, задаваемой без переменной, а если дело идёт о цвете, так ещё и условие задавать (переменные указывающие цвет в правилах делают правило валидным даже в неподдерживаемых браузерах, что анулирует предстоящие правила которые заменяют):
к примеру:
—------------------------------------—
left: 10px;
left: var(--x, 10px);
—---------------------------------------
div {
color: black;
}
@supports (--: var) {
div {
color: var(--x, black);
}
}
—----------------------------------------