时间戳

首页 > 解决方案 > 如何将速记 CSS 属性（边框、左边框、右边框...）导出为 CSS 变量

css - 如何将速记 CSS 属性（边框、左边框、右边框...）导出为 CSS 变量

问题描述

如果我这样做：

.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设置了，它应该优先于其他未设置的值。

标签： csscss-variables

解决方案

正如我在上一个答案中解释的那样，使用border-left: var(--a-border-left)它意味着无论border-leftCSS 变量的定义如何，它都将始终具有有效值。考虑到这一点，您的速记属性将始终被忽略，因为速记属性将始终覆盖它。

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

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

推荐阅读