Как сбросить переменную CSS (она же настраиваемые свойства) и использовать резервную?

Значение отступать работает, только если переменная --border-width не определена:

The custom property's fallback value, which is used in case the custom property is invalid in the used context.

MDN

См. демо ниже:

:root {
  --border-width-top: 0;
  --border-width-right: 0;
  --border-width-bottom: 0;
  --border-width-left: 0;
  /*--border-width: 0;*/
}

div {
  border-color: red;
  border-style: solid;
  border-width: var(--border-width, var(--border-width-top) var(--border-width-right) var(--border-width-bottom) var(--border-width-left));
}

div {
  --border-width-top: 10px;
}

<div id = "app">
  <h1>TypeScript Starter</h1>
</div>

Вы можете отменить значение, используя initial, чтобы использовать резервное значение:

:root {
  --border-width-top: 2px;
  --border-width-right: 2px;
  --border-width-bottom: 2px;
  --border-width-left: 2px;
  --border-width: 0;
}
div {
  margin:5px;
  border-color: red;
  border-style: solid;
  border-width: var(--border-width, var(--border-width-top) var(--border-width-right) var(--border-width-bottom) var(--border-width-left));
}


div.box {
  --border-width:initial;
  --border-width-top: 10px;
}

<div>some content</div>
<div class = "box">some content</div>

из спецификация:

The initial value of a custom property is an empty value; that is, nothing at all. This initial value has a special interaction with the var() notation, which is explained in the section defining var().

а также

To substitute a var() in a property’s value:

1. If the custom property named by the first argument to the var() function is animation-tainted, and the var() function is being used in the animation property or one of its longhands, treat the custom property as having its initial value for the rest of this algorithm.
2. If the value of the custom property named by the first argument to the var() function is anything but the initial value, replace the var() function by the value of the corresponding custom property. Otherwise,
3. if the var() function has a fallback value as its second argument, replace the var() function by the fallback value. If there are any var() references in the fallback, substitute them as well.
4. Otherwise, the property containing the var() function is invalid at computed-value time

Как объяснил @Temani, вы можете использовать --varName: initial, чтобы установить фактически пустое, но недопустимое значение для переменной. Тогда будет использоваться любые объявленные резервные значения в var(....).

Поэтому, если вы определяете --text_color: initial, используйте селектор: color: var(--text_color, hotpink) ваш текст будет розовым, а не черным (как было бы, если бы вы прямо написали color: initial).

Затем я подумал, не мог бы я использовать unset вместо initial. Просто казалось более естественным отменить определение переменной с помощью --text_color: unset. Это более интуитивно понятно, и, поскольку вы, вероятно, редко используете unset, вы запомните свое намерение.

Однако оказывается, что unset не работает точно так же, как initial, но иногда может быть полезен, если вам нужно наследовать переменные, объявленные выше.

--text_color: initial

• Устанавливает значение переменной в пустое значение (см. указанную спецификацию в ответе Тамани)
• Любые узлы-предки, которые устанавливают --text_color, будут переопределены этим объявлением.
• Мне нравится думать об этом, как если бы вы могли установить --text_color: null

--text_color: unset

• Эффективно полностью удаляет переменную из этого узла DOM. Он не устанавливает для него магический пустое значение — он ведет себя так же, как если бы вы просто полностью удалили его из своего кода.
• Это позволяет использовать любое значение унаследовал.
• Мне нравится думать об этом, как если бы вы могли установить --text_color: undefined
• Поэтому, если какой-либо узел-предок DOM определяет --text_color: green, а ваш узел объявляет --text_color: unset вместе с color: var(--text_color, blue), он будет зеленым, а не синим.

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

Я не могу обещать, является ли это фактическим поведением спецификации :-)

Вы также можете сделать это в Javascript:

element.style.setProperty('--button_icon_active_color', '')
element.style.setProperty('--button_icon_active_color', null)

Они оба «сбросят» значение, как будто его никогда не было.

Если вы запустите эту команду в консоли браузера, вы увидите, что она исчезнет из стилей.