此问题在此处已有答案：

CSS scoped custom property ignored when used to calculate variable in outer scope（2个答案）
5天前关闭。
我希望并期望这里的文本是蓝色的，但它是红色的：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      :root,
      .light {
        --var1: red;
      }
      .dark {
        --var1: blue;
      }
      /* @media (prefers-color-scheme: dark) {
        :root {
          --var1: blue;
        }
      } */

      :root {
        --var2: var(--var1);
      }

      body {
        color: var(--var2);
      }
    </style>
  </head>
  <body class="dark">
    <p>red = light, blue = dark</p>
  </body>
</html>

字符串
我在macOS Chrome、macOS Safari、macOS Firefox和iOS Safari上试过这个，结果都是上面的文字是红色的。
在Chrome和Safari devtools中，将鼠标悬停在--var2: var(--var1)属性上会显示计算值为红色，这是在网页上发生的情况。然而，单击此--var1会转到.dark声明中的--var1: blue;属性。此外，--var1: red属性（在:root, .light中）被删除，这似乎意味着该属性被.dark中的属性覆盖。
x1c 0d1x的数据
我还尝试了更改prefers-color-scheme和body元素上的类（在取消注解@media (prefers-color-scheme: dark)部分之后），还有一些其他情况没有按照我希望的方式工作（我在下表中用斜体字标出了这些情况）。
| | prefers-color-scheme: light个|prefers-color-scheme: dark个| prefers-color-scheme: dark |
| --|--|--|--|
|没有阶级| 红色|红色|蓝色|
|class="light"| 红色|红色| * 蓝色（应该是红色）|
|class="dark"| 红色 （应该是蓝色）| 红色 *（应该是蓝色）|蓝色|
以下是我发现的一些解决方法：

将color: var(--var2)更改为color: var(--var1)
但我想把这些变量分开（--var1实际上类似于--slate-12，--var2类似于--foreground-color）
添加.dark { --var2: var(--var1); }
但我不想再重复这个，因为我已经在:root中定义了它。

还有其他的方法来解决这个问题吗？还有，为什么devtools在网页使用的--var1定义上出错了？

更多上下文

我尝试使用Radix Colors，它的CSS如下所示：

:root, .light, .light-theme {
  --slate-1: hsl(240, 22.0%, 99.0%);
  --slate-2: hsl(240, 20.0%, 98.0%);
  --slate-3: hsl(239, 13.4%, 95.4%);
  --slate-4: hsl(238, 11.8%, 92.9%);
  --slate-5: hsl(237, 11.1%, 90.5%);
  --slate-6: hsl(236, 10.6%, 87.9%);
  --slate-7: hsl(234, 10.4%, 84.4%);
  --slate-8: hsl(231, 10.2%, 75.1%);
  --slate-9: hsl(230, 6.0%, 57.0%);
  --slate-10: hsl(227, 5.2%, 51.8%);
  --slate-11: hsl(220, 6.0%, 40.0%);
  --slate-12: hsl(210, 16.0%, 20.0%);
}

.dark, dark-theme {
  --slate-1: hsl(240, 5.0%, 9.8%);
  --slate-2: hsl(240, 6.9%, 11.4%);
  --slate-3: hsl(235, 6.8%, 17.1%);
  --slate-4: hsl(233, 6.8%, 19.9%);
  --slate-5: hsl(231, 6.8%, 21.7%);
  --slate-6: hsl(230, 6.9%, 23.8%);
  --slate-7: hsl(228, 7.0%, 27.0%);
  --slate-8: hsl(225, 7.2%, 32.5%);
  --slate-9: hsl(220, 6.0%, 44.0%);
  --slate-10: hsl(218, 5.3%, 51.5%);
  --slate-11: hsl(220, 7.0%, 70.0%);
  --slate-12: hsl(220, 10.0%, 90.0%);
}

型
我不想做body { color: var(--slate-12); }（它可以工作），我想定义类似:root { --foreground-color: var(--slate-12); }的东西，以防我需要在CSS中的其他地方使用var(--foreground-color)。

你想解决的实际问题是什么？当用户处于黑暗模式时，反转你的配色方案？你只需要一组变量来构建它。

:root {
  --clr-light: #D9B8C4;
  --clr-dark: #241715;
}

body {
  color: var(--clr-dark);
  background: var(--clr-light);
}

@media (prefers-color-scheme: dark) {
  body {
    color: var(--clr-light);
    background: var(--clr-dark);
  }
}

字符串
这里有一个片段来演示，但为了演示目的，我只是使用两个类来代替测试黑暗模式：

:root {
  --clr-light: #D9B8C4;
  --clr-dark: #241715;
}

.light {
  color: var(--clr-dark);
  background: var(--clr-light);
}

.dark {
  color: var(--clr-light);
  background: var(--clr-dark);
}

<div class="light">
  <p>light</p>
</div>

<div class="dark">
  <p>dark</p>
</div>

的数据

css 引用另一个变量的变量没有正确的值[重复]

更多上下文

1条答案

相关问题

热门标签

最新问答