nested custom properties not reactive

Question

I have the following approach to spacing

:root {
  --space-unit:  1em;
  --space-xxxs:  calc(0.25 * var(--space-unit));
  --space-xxs:   calc(0.375 * var(--space-unit));
  --space-xs:    calc(0.5 * var(--space-unit));
  --space-sm:    calc(0.75 * var(--space-unit));
  --space-md:    calc(1.25 * var(--space-unit));
  --space-lg:    calc(2 * var(--space-unit));
  --space-xl:    calc(3.25 * var(--space-unit));
  --space-xxl:   calc(5.25 * var(--space-unit));
  --space-xxxl:  calc(8.5 * var(--space-unit));
}

so throughout my application I use styles like

.my-component {
  padding: var(--space-md);
}

I expected to be able to manipulate --space-unit and adjust padding throughout

<div class="parent-wants-more-padding">
   <div class="my-component">...</div>
</div>

.parent-wants-more-padding {
  --space-unit: 1.5em;
}

but changing --space-unit doesn't seem to change the padding on .my-component like I hoped it would.

if I lose the nesting and access --space-unit directly

.my-component {
  padding: calc(1.25 * var(--space-unit));
}

changing --space-unit does actually result in additional padding but obviously is less desired than using the simpler space-xs, space-sm, space-md, etc. Is it possible to have reactivity through nested properties? Or maybe another approach?

nested custom properties not reactive

0 Answers0