Question

我正在尝试为盒子模型属性设置CSS变量。我要支持为所有方面以及各个方面设置值。我想拥有默认值，但是无论哪种方式都可以覆盖。我尝试使用后备值，但收效甚微。

类似的东西：

:root {
  --border-width-top: 0;
  --border-width-right: 0;
  --border-width-bottom: 0;
  --border-width-left: 0;
  --border-width: 0;
}
div {
  border-color: red;
  border-style: solid;
  border-width: var(--border-width, var(--border-width-top) var(--border-width-right) var(--border-width-bottom) var(--border-width-left));
}


div {
  --border-width-top: 10px;
}

这不会起作用，好像border-width具有默认值，那么它将始终优先于后备值。不确定目前有没有办法做到这一点，但是我觉得已经很接近找到解决方案了。

这是我正在玩的堆叠闪电战：stackblitz

Answer 1

后备值仅在未定义变量--border-width时有效：

自定义属性的后备值，用于自定义属性   属性在使用的上下文中无效。

MDN

请参见下面的演示

:root {
  --border-width-top: 0;
  --border-width-right: 0;
  --border-width-bottom: 0;
  --border-width-left: 0;
  /*--border-width: 0;*/
}

div {
  border-color: red;
  border-style: solid;
  border-width: var(--border-width, var(--border-width-top) var(--border-width-right) var(--border-width-bottom) var(--border-width-left));
}

div {
  --border-width-top: 10px;
}

<div id="app">
  <h1>TypeScript Starter</h1>
</div>

Answer 2

您可以使用initial取消设置值以使用后备广告号：

:root {
  --border-width-top: 2px;
  --border-width-right: 2px;
  --border-width-bottom: 2px;
  --border-width-left: 2px;
  --border-width: 0;
}
div {
  margin:5px;
  border-color: red;
  border-style: solid;
  border-width: var(--border-width, var(--border-width-top) var(--border-width-right) var(--border-width-bottom) var(--border-width-left));
}


div.box {
  --border-width:initial;
  --border-width-top: 10px;
}

<div>some content</div>
<div class="box">some content</div>

来自the specification：

自定义属性的初始值是空值；也就是说，什么都没有。此初始值与var（）表示法具有特殊的交互作用，这在定义var（）的部分中进行了说明。

和

要 用属性值替换var（） ：


如果自定义属性由var（）的第一个参数命名   函数是动画污染的，并且var（）函数正在   动画属性或其惯用手之一，请对待自定义   属性具有该算法其余部分的初始值。

如果由第一个参数命名的自定义属性的值   var（）函数除了初始值以外的任何东西，请替换var（）   通过相应的自定义属性的值来实现功能。否则，

如果var（）函数具有后备值作为其第二个参数，   用后备值替换var（）函数。如果有的话   备用中的var（）引用，也请替换它们。

否则，包含var（）函数的属性在   计算值时间

框模型的CSS自定义属性（变量）

2 个答案: