具有自身后备值的 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.

来源:

• > 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?