如何将简写的CSS属性(border、border left、border right..)导出为CSS变量

Question

如果我这样做：

.a {
border: var(--a-border);
border-left: var(--a-border-left);
border-right: var(--a-border-right);
border-top: var(--a-border-top);
border-bottom: var(--a-border-bottom);
}

设置--a-border永远不会起作用，因为像a-border-left这样的单个属性已经重置了该值。我想的是，我不会为那些导出的变量提供任何默认值。因此，如果设置了--a-border，它应该优先于其他未设置的值。

Answer 1

正如我在前面的回答中所解释的，当使用border-left: var(--a-border-left)时，这意味着border-left将始终具有一个有效值，而不是CSS变量的定义。考虑到这一点，您的简写属性将始终被忽略，因为长手属性将始终覆盖它

一个解决方案是考虑回退属性，并在每个属性中重新定义简写中使用的变量：

.a {
border: var(--a-border);
border-left: var(--a-border-left,var(--a-border));
border-right: var(--a-border-right,var(--a-border));
border-top: var(--a-border-top,var(--a-border));
border-bottom: var(--a-border-bottom,var(--a-border));


width: 200px;
height: 100px;
display:inline-block;
}
:root {
--a-border: 5px solid red;
}

<div class="a"></div>
<div class="a" style="--a-border-bottom:5px solid green"></div>