css - 如何使使用另一个变量定义的 CSS 变量反射(reflect)对依赖项的更改？

Question

<分区>

Answer 1

您是正确的，因为您的 .demo 元素应用了您在 :root 中设置的 border。但是，在您的 .demo.active 中，您只是重新定义 CSS 变量 --border-width(而不是利用现有的).您需要明确使用属性 border-width。

为了在 .demo.active 中重用 --border-width 变量，您需要再次使用 var() 与 border-width: var(--border-width):

:root {
  --border-width: 1px;
  --border: var(--border-width) solid #000;
}

.demo {
  border: var(--border);
  margin: 1em;
}

.demo.active {
  border-width: var(--border-width);
}

<div class="demo">
  Should have thin border
</div>

<div class="demo active">
  Should have thick border
</div>

请注意，这将复制在 :root --border-width 中设置的内容。 但是，鉴于您还提到您希望有一个更厚的边框，我怀疑您实际上可能正在寻找的是覆盖此设置(使用 border-width: 10px), 或扩展它以包含一个附加项，使用
border-width: var(--border-width) + 10px:

:root {
  --border-width: 1px;
  --border: var(--border-width) solid #000;
}

.demo {
  border: var(--border);
  margin: 1em;
}

.demo.active {
  border-width: var(--border-width) + 10px;
}

<div class="demo">
  Should have thin border
</div>

<div class="demo active">
  Should have thick border
</div>