如何将 shorthand CSS 属性（边框、左边框、右边框...）导出为 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 变量的定义如何。考虑到这一点，您的 shorthand 属性将始终被忽略，因为手写的将始终覆盖它。

一个解决方法是考虑回退属性并重新定义每个个体 shorthand 中使用的变量属性:

.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>

如何将 shorthand CSS 属性（边框、左边框、右边框...）导出为 CSS 变量

How can i export shorthand CSS properties (border, border-left, border-right...) as CSS variables

css

css-variables