嵌套CSS自定义属性无响应？如何实现层级变量联动？

问题描述 #

我用CSS自定义属性定义了一套间距系统：

: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));
}

组件中直接使用这些衍生变量：

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

我原本希望通过修改父元素的--space-unit来全局调整子组件的内边距：

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

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

但修改后子组件的padding没有变化。只有直接写padding: calc(1.25 * var(--space-unit))时，修改--space-unit才会生效，但这样就失去了使用--space-md这类变量的便捷性。请问怎么实现嵌套自定义属性的联动，或者有没有其他解决方案？

问题原因 #

CSS自定义属性的计算是作用域内一次性完成的。你在:root中定义的--space-md等衍生变量，会在:root作用域下基于初始的--space-unit计算出固定值（比如1.25em），并被子元素继承。当父元素重写--space-unit时，子元素继承的--space-md还是:root中计算好的旧值，不会重新计算——因为衍生变量的定义没有在父元素作用域中更新。

解决方案 #

方案1：重写父元素作用域下的所有衍生变量

在需要调整间距的父元素中，不仅重写--space-unit，同时重新定义所有衍生变量，让它们基于新的--space-unit计算：

.parent-wants-more-padding {
  --space-unit: 1.5em;
  --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));
}

这种方式能直接解决问题，但缺点是代码重复度高，维护成本大。

方案2：改用「倍数系数 + 基础单位」的动态计算模式

把间距变量拆分为倍数系数和基础单位，在组件中实时计算最终值：

:root {
  --space-unit: 1em;
  /* 定义间距倍数，而非直接计算好的长度 */
  --space-xxxs: 0.25;
  --space-xxs: 0.375;
  --space-xs: 0.5;
  --space-sm: 0.75;
  --space-md: 1.25;
  --space-lg: 2;
  --space-xl: 3.25;
  --space-xxl: 5.25;
  --space-xxxl: 8.5;
}

.my-component {
  /* 使用时动态计算 */
  padding: calc(var(--space-md) * var(--space-unit));
}

此时修改父元素的--space-unit，组件的padding会自动基于新的单位和倍数重新计算，既保留了变量命名的便捷性，又实现了联动效果。

方案3：用CSS预处理器简化重复代码

如果项目使用Sass/Less等预处理器，可以用混合宏（Mixin）封装间距变量的定义，避免手动重复代码：

@mixin space-system($unit: 1em) {
  --space-unit: #{$unit};
  --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));
}

// 全局默认间距
:root {
  @include space-system(1em);
}

// 父元素自定义间距
.parent-wants-more-padding {
  @include space-system(1.5em);
}

预处理器会自动生成重复的变量定义代码，既保证了代码的可维护性，又实现了预期的联动效果。

内容的提问来源于stack exchange，提问作者stackoverfloweth