1

所以，我正在尝试设计一个样式表，为我们提供快速简便的自定义选项（一些团队成员对 CSS 的理解有限，构建一个可以轻松编辑的“主题表”会更安全）

我在 :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);
}

我最终的解决方案是注释掉除正在使用的变量之外的所有变量。这允许我在 var() 的第二个字段中指定一个默认值，除非该变量确实存在，否则它将始终默认为该值。这不是我的目标，但我相信它是基本 CSS 范围内的唯一解决方案。

4

1 回答 1

2

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

注意：存在计算值时无效的概念是因为变量不能像其他语法错误那样“提前失败”，所以当用户代理意识到属性值无效时，它已经丢弃了其他级联值。

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

于 2017-08-17T15:43:29.990 回答