css - 具有自身后备值的 CSS 变量

Question

我试图在 javascript 中实现的内容如下所示：

myVar = newVar || myVar;

在 css 中，我正在执行以下操作：

--my-var: var(--new-var, var(--my-var))

似乎它不起作用。如果未定义新值，甚至可以在回退中使用旧值吗？

Answer 1

通常 CSS 不能做if/then/else，但是当使用 ie 时var，一种可以。

使用 var() 您可以在给定变量尚未定义时定义回退值

第二个（可选）参数，声明值，虽然有一些限制。

产生式匹配一个或多个令牌的任何序列。因此，只要序列不包含 , , 不匹配的 <)-token>、<]-token> 或 <}-token>，或者顶级标记或值为“！”的标记 ，它代表了有效声明可以作为其值的全部内容。

源：

• MDN CSS 变量
• 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;

Src：为什么 Javascript 中未定义的变量有时会评估为 false，有时会抛出未捕获的 ReferenceError？

Answer 2

var()重新声明同一自定义属性时，您不能将自定义属性的值指定为表达式中的后备值。旧值在级联解析期间被覆盖，因此在计算表达式时不会有旧值可供回退var()。