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

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

initial您可以使用后备值来取消设置该值：

\n\n

\r\n

\r\n

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

\r\n

<div>some content</div>\r\n<div class="box">some content</div>

\r\n

\r\n

\r\n

\n\n

从规范：

\n\n

\n

自定义属性的初始值为空值；也就是说，什么都没有。该初始值与 var() 表示法有特殊的交互作用，这在定义 var() 的部分中进行了解释。

\n

\n\n

和

\n\n

\n

要替换property\xe2\x80\x99s 值中的var() ：

\n\n

\n
1. 如果 var() 函数的第一个参数命名的自定义属性受到动画污染，并且 var() 函数正在动画属性或其普通写法之一中使用，则将自定义属性视为对该算法的其余部分有其初始值。
\n
2. 如果 var() 函数的第一个参数命名的自定义属性的值不是初始值，则将 var()\n 函数替换为相应自定义属性的值。否则，
\n
3. 如果 var() 函数有一个后备值作为其第二个参数，\n 将 var() 函数替换为后备值。如果后备中有任何 var() 引用，也请替换它们。
\n
4. 否则，包含 var() 函数的属性在计算值时间\n 无效
\n

\n

\n

Answer 2

正如@Temani 所解释的，您可以使用它--varName: initial来设置变量的有效值是空但无效的值。然后将使用中声明的任何后备值。var(....)

因此，如果您定义--text_color: initial然后使用选择器：color: var(--text_color, hotpink) 您的文本将是粉红色而不是黑色（如果您直接编写，则会是黑色color: initial）。

然后我想知道是否可以unset使用initial. 使用 取消定义变量似乎更自然--text_color: unset。它更直观，而且由于您可能很少使用，因此unset您会记住您的意图。

然而，事实证明它的unset工作方式与 并不完全相同initial，但如果您需要继承更高层声明的变量，有时可能会很有用。

--text_color: initial

• 将变量的值设置为空值（请参阅 Tamani 的答案中引用的规范）
• 设置的任何祖先节点都--text_color将被此声明覆盖
• 我喜欢把这个想象成你可以设置--text_color: null

--text_color: unset

• 有效地从该 DOM 节点中完全删除变量。它不会将其设置为神奇的空值- 它的行为方式与您刚刚从代码中完全删除它相同。
• 这允许使用任何继承的值。
• 我喜欢把这个想象成你可以设置--text_color: undefined
• 因此，如果任何祖先 DOM 节点定义--text_color: green并且您的节点--text_color: unset随之声明，color: var(--text_color, blue)它将是绿色而不是蓝色。

这对我很有用，因为我动态设置了很多变量，并且需要取消设置它，就好像它从未设置过一样。

无论这是否是实际的规范行为，我都无法保证:-)