Как я могу экспортировать сокращенные 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>