Переменная CSS с резервным значением самой себя

Обычно CSS не может сделать if/then/else, но при использовании i.e. var можно, вроде как.

Используя var(), вы можете определить резервное значение, когда данная переменная еще не определена.

Однако второй (необязательный) аргумент, declaration-value, имеет некоторые ограничения.

Производство соответствует любой последовательности одного или нескольких токенов. Таким образом, если последовательность не содержит , , несопоставленных ‹)-токен>, ‹]-токен> или ‹}-токен>, либо токены верхнего уровня или токены со значением "!" , он представляет собой все, что действительное объявление может иметь в качестве значения.

Источник:

• Переменная CSS MDN
• MDN с использованием переменных CSS

это не сработает

:root{ 
  --myOld: lime;
  --myVar: var(--myNew, --myOld) 
}

div {
  color: var(--myVar)
}

<div>Hey there</div>

Это будет работать

:root{ 
  --myOld: lime;
  --myVar: var(--myNew, var(--myOld)) 
}

div {
  color: var(--myVar)
}

<div>Hey there</div>

И это будет работать

:root{ 
  --myVar: var(--myNew, var(--myOld, red)) 
}

div {
  color: var(--myVar)
}

<div>Hey there</div>

Для javascript, делая это, вы получаете ошибку ссылки, и чтобы избежать этого, вы можете сделать так:

myVar = (typeof newVar === 'undefined') ? myVar : newVar;

Источник: Почему неопределенный переменная в Javascript иногда оценивается как ложная, а иногда выдает необработанный ReferenceError?

Вы не можете назначить значение настраиваемого свойства в качестве резервного значения в выражении var() при повторном объявлении того же настраиваемого свойства. Старое значение переопределяется во время каскадного разрешения, поэтому к моменту вычисления выражения var() не останется старого значения, к которому можно было бы вернуться.