具有自身回退值的 CSS 变量

Question

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

myVar = newVar || myVar;

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

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

似乎它不起作用。如果新值未定义，是否有可能在回退中使用旧值？

Answer 1

通常 CSS 不能做if/then/else，但是当使用 ie varone 时，有点。

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

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

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

来源：

这行不通

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