具有自身后备值的 CSS 变量

Question

我试图在 javascript 中实现的效果如下所示：

myVar = newVar || myVar;

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

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

好像不行。如果新值未定义，甚至可以在后备中使用旧值吗？

Answer 1

一般 CSS 不能做 if/then/else，但是当使用即 var 时，一个可以，有点。

使用 var() 可以在给定的情况下定义一个备用值 变量尚未定义

第二个（可选）参数，declaration-value，虽然有一些限制。

产生式匹配一个或多个的任何序列 令牌。所以，只要序列不包含 , , 不匹配的 , , 或 ，或顶级令牌或 值为“！”的标记，它代表了一个有效的全部 声明可以作为它的值。

来源：

• MDN CSS Var
• MDN Using CSS variables

这行不通

: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;

源：Why does an undefined variable in Javascript sometimes evaluate to false and sometimes throw an uncaught ReferenceError?

Answer 2

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