css - 覆盖 :root CSS variables from inner scopes

Question

这个问题已经有答案了:

CSS scoped custom property ignored when used to calculate variable in outer scope (2 个回答)

已关闭 3 年前。

在我们的design system中在 Stack Overflow，我们使用 Less 来编译 CSS 颜色值。

我们有全局 Less 变量，例如 @orange-500经常针对悬停状态、构建边框样式、背景颜色等进行修改。

在Less中，这被写成darken(@orange-500, 5%) 。我正在尝试使用 native CSS 变量来实现类似的目标。切换到 CSS 变量将使我们能够更快地发布依赖于主题(Stack Exchange Network、深色模式等)的功能，同时减少 CSS 行数，同时支持在媒体查询上交换变量(高对比度、深色模式等)。

这个覆盖 hsl 中颜色亮度值的示例当变量的范围限定为 CSS 类时有效:

.card {
  --orange: hsl(255, 72%, var(--lightness, 68%));
  background: var(--orange);
}
.card:hover {
  --lightness: 45%;
}

<div class="card">
  Hello world
</div>

但是，我们需要在一个可交换的位置全局指定颜色变量以支持全局主题，但这并不能按预期工作:

:root {
  --orange: hsl(255, 72%, var(--lightness, 68%));
}
.card {
  background: var(--orange);
}
.card:hover {
  --lightness: 45%;
}

<div class="card">
  Hello world
</div>

我尝试从 :root 切换至html或body没有任何运气。有什么解决方法吗？

Answer 1

这是一个范围界定问题。您这样做的方式是从 :root 继承 --orange ，并在 中继承 --orange :root 的亮度为 68%。

为了更改它，您需要将 --orange 变量的范围重新调整为将查找新 --lightness 值的元素。有几种方法可以实现这一目标:

选项 1:在元素上复制 --orange 变量:

:root {
  --lightness: 68%;
  --orange: hsl(255, 72%, var(--lightness));
}
.card {
  background: var(--orange);
  --orange: hsl(255, 72%, var(--lightness));
}
.card:hover {

  --lightness: 45%;
}

<div class="card">
  Hello world
</div>

显然这有点糟糕，因为您必须复制该 --orange 变量。

选项 2:您可以抽象 --orange 的其他参数，这样它就不会重复。尽管事实上它是更多的文本，但我很喜欢这种方法:

:root {
  --lightness: 68%;
  --orangeHue: 255;
  --orangeSat: 72%;
  --orange: hsl(var(--orangeHue), var(--orangeSat), var(--lightness));
}
.card {
  background: var(--orange);
  --orange: hsl(var(--orangeHue), var(--orangeSat), var(--lightness));
}
.card:hover {

  --lightness: 45%;
}

<div class="card">
  Hello world
</div>

您还可以做的是将其范围专门限定为可能应用于 HTML 元素或正文的 .darkMode 类。这也可能是有道理的，因为从代码中可以清楚地看出意图是什么:

选项 3

:root {
  --lightness: 68%;
  --orangeHue: 255;
  --orangeSat: 72%;
  --orange: hsl(var(--orangeHue), var(--orangeSat), var(--lightness));
}

.card {
  background: var(--orange);

}
.card:hover {
  --lightness: 45%;
}
.darkMode .card {
  --orange: hsl(var(--orangeHue), var(--orangeSat), var(--lightness));
}

  <div class="darkMode">
    <div class="card">
      Hello world
    </div>
  </div>

无论您如何操作，问题都是 --orange 变量继承自设置 --lightness 的原始作用域。将其视为“继承计算值”。

为了让 --orange 获得新的亮度，您需要在某处添加一个新的 --orange 。

选项 4

我不确定你的主题模式是什么，但我可以解释一下我如何自己创建黑暗模式 blog 。如果你看CSS您将看到我创建了两个遵循相同命名约定的完整主题:

--themeLightTextColor: rgb(55, 55, 55);
--themeLightBGColor: rgb(255, 255, 255);
--themeLightAccentColor: rgb(248, 248, 248);
--themeLightTrimColor: rgb(238, 238, 238);
--themeDarkTextColor: rgb(220, 220, 220);
--themeDarkBGColor: rgb(23, 23, 23);
--themeDarkAccentColor: rgb(55, 55, 55);
--themeDarkTrimColor: rgb(40, 40, 40);

然后我要做的是创建第三组变量，其职责是成为“主动”管理者:

--themeActiveLinkColor: var(--linkColor);
--themeActiveLinkColorHover: var(--linkColorHover);
--themeActiveTextColor: var(--themeLightTextColor);
--themeActiveEditorialTextColor: var(--themeLightPltNLow);
--themeActiveBGColor: var(--themeLightBGColor);
--themeActiveAccentColor: var(--themeLightAccentColor);
--themeActiveTrimColor: var(--themeLightTrimColor);

然后，我将事件主题设置范围限制在单个类下:

.theme--dark {
   --themeActiveTextColor: var(--themeDarkTextColor);
   --themeActiveEditorialTextColor: var(--themeDarkPltNLow);
   --themeActiveBGColor: var(--themeDarkBGColor);
   --themeActiveAccentColor: var(--themeDarkAccentColor);
   --themeActiveTrimColor: var(--themeDarkTrimColor);
}

看来您的意图可能是不必显式声明主题，而是调整一些“根变量”来调整它。但我建议您可能有一种模式，其中单个类可以更改事件主题。这种模式的优点是您还可以调整类名称上的任何“根变量”。