CSS 具有自身回退值的变量

Question

我要在 javascript 中实现的目标如下所示：

myVar = newVar || myVar;

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

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

好像不行。如果新值未定义，是否有可能在后备中使用旧值？

Answer 1

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

Using var() you can define a fallback value when the given variable is not yet defined

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

The production matches any sequence of one or more tokens. So, as long as the sequence does not contain , , unmatched <)-token>, <]-token>, or <}-token>, or top-level tokens or tokens with a value of "!" ,it represents the entirety of what a valid declaration can have as its value.

来源：

这行不通

: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() 表达式时将没有旧值可以回退。

CSS 具有自身回退值的变量

CSS variable with fallback value of itself

css

css-variables