如何重置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;
}

这不会像边框宽度具有默认值一样工作，那么它将始终优先于回退值。 目前不确定有没有办法做到这一点，但我觉得离找到解决方案很近。

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

Answer 1

您可以使用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>

从规范：

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

和

替换属性值中的var()：

1. 如果自定义属性由第一个参数命名为 var() 函数被动画污染，并且 var() 函数用于 动画属性或其长手之一，处理自定义 属性作为此算法其余部分的初始值。
2. 如果由第一个参数命名的自定义属性的值为 var() 函数不是初始值，替换 var() 函数由相应的自定义属性的值。否则
3. 如果 var() 函数有一个回退值作为其第二个参数，将 var() 函数替换为回退值。如果有的话 回退中的 var() 引用，也替换它们。
4. 否则，包含 var() 函数的属性在 计算值时间

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)它将是绿色而不是蓝色。

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

无论这是否是实际的规范行为，我都不能保证：-)

Answer 3

仅当未定义变量--border-width时，回退值才有效：

自定义

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

多核

请参阅下面的演示：

: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 4

你也可以在Javascript中做到这一点：

element.style.setProperty('--button_icon_active_color', '')
element.style.setProperty('--button_icon_active_color', null)

这些都将"取消设置"值，就好像它从未存在过一样。

如果在浏览器控制台中运行此命令，您将看到它从样式中消失。