如何防止 CSS 在使用变量时覆盖以前的值

Question

所以，我正在尝试设计一种样式 sheet，它将为我们提供快速简便的自定义选项（一些团队成员对 CSS 的理解有限，这样会更安全构建一个可以轻松编辑的 'theme sheet')

我在 :root 中声明我的变量，稍后在 css 文件中使用它们，但我观察到如果 css 找不到变量，它会恢复为默认值而不是使用之前在 CSS 中提供的值。

:root {
    --global-font: empty;
    --global-font-color:empty;
    --global-bg-color: #282a33;
}

我目前将其设置为继承以尝试解决此问题，但这仍然会从其父容器中提取值，并且该网页已经选择了默认主题，如果我们继承，它通常会破坏它们。

body
{
    font: var(--global-font,inherit);
    color: var(--global-font-color,inherit);
    background-color:var(--global-bg-color,inherit);
}

My eventual solution was to comment out all the variables except those being used. That allowed me to specify a default value in the second field for var() that it will always default to unless the variable did exist. It isn't quite what I was aiming for but I believe its the only solution within the scope of basic css.

Answer 1

抱歉，由于级联变量的性质，无法指定一个 var() 表达式来使其所在的声明无效而不影响级联的其余部分。来自规范：

Note: The invalid at computed-value time concept exists because variables can’t "fail early" like other syntax errors can, so by the time the user agent realizes a property value is invalid, it’s already thrown away the other cascaded values.

您的自定义属性必须是强制性的，并且您必须确保您的主题作者指定了所有这些属性。

如何防止 CSS 在使用变量时覆盖以前的值

How to prevent CSS from overwriting a previous value when using variables

css

css-variables