在另一个CSS变量中使用的Cascade Override CSS变量

2024-05-20 • 问答

我正在使用使用其他CSS变量定义的CSS变量。我想知道是否有可能覆盖另一个CSS变量中使用的CSS变量，并更新第二个（复合）变量以反映更改。

这里是一个例子：

:root {
  --color1: red;
  --color2: blue;
  --gradient: linear-gradient(30deg,var(--color1),var(--color2));
}

.gradient {
  width: 100%;
  height: 10rem;
  
  --color1: yellow;
  background-image: var(--gradient);
}

<div class="gradient"></div>

在上面的示例中，我希望将--color1的更新值反映在--gradient中。如您所见，--gradient变量仍为:root（--color1）使用red值，而忽略了.gradient（{{1} }。

是否有一种方法可以通过更新/覆盖复合CSS依赖的变量之一来更新复合CSS变量的值？

在另一个CSS变量中使用的Cascade Override CSS变量

yanglibaoqi 回答：在另一个CSS变量中使用的Cascade Override CSS变量

大家都在问