具有自身回退值的CSS变量

Question

我想在javascript中尝试实现的目标如下：

myVar = newVar || myVar;

在CSS中我正在做以下事情：

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

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

Answer 1

一般情况下，CSS无法执行 if / then / else ，但使用ie var时可以使用

。

  

使用var（）可以在给定时定义回退值   变量尚未定义

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

  

生产匹配一个或多个的任何序列   令牌。所以，只要序列不包含   ,,,不匹配＆lt;） - 令牌＆gt;，＆lt;] - 令牌＆gt;，   或＆lt;} - 令牌＆gt;，或顶级令牌或   值为＆＃34;！＆＃34;的标记，它代表了有效的全部内容   声明可以作为其价值。

Src：

• MDN CSS Var
• MDN Using CSS variables

这不会起作用

＆＃13;

＆＃13;

:root{ 
  --myOld: lime;
  --myVar: var(--myNew, --myOld) 
}

div {
  color: var(--myVar)
}

＆＃13;

<div>Hey there</div>

＆＃13;

＆＃13;

＆＃13;

这将有效

＆＃13;

＆＃13;

:root{ 
  --myOld: lime;
  --myVar: var(--myNew, var(--myOld)) 
}

div {
  color: var(--myVar)
}

＆＃13;

<div>Hey there</div>

＆＃13;

＆＃13;

＆＃13;

这将有效

＆＃13;

＆＃13;

:root{ 
  --myVar: var(--myNew, var(--myOld, red)) 
}

div {
  color: var(--myVar)
}

＆＃13;

<div>Hey there</div>

＆＃13;

＆＃13;

＆＃13;

对于javascript，这样做你会得到一个引用错误，并避免你可以这样做：

myVar = (typeof newVar === 'undefined') ? myVar : newVar;

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

Answer 2

重新声明相同的自定义属性时，无法将自定义属性的值指定为var()表达式中的后备值。在级联解析期间会覆盖旧值，因此在评估var()表达式时，将不会留下旧值。