Question

我在项目中使用CSS变量，出于可重复使用的目的，我将变量分配给其他变量。


:root {
  --bg: #fff;

  --header-bg: var(--bg);
  --dropdown-bg: var(--bg);
}

现在使用CSS类，我更改了--bg变量（例如，以深色主题为例）。

.dark-theme {
  --bg: #000;
}

我希望--header-bg和--dropdown-bg也能反映出新的价值。目前，我能够更新它们的唯一方法是必须在类范围内再次手动分配它们。

是否可以将变量“重新分配”为新的--bg值？

说明问题的简单代码段：https://jsfiddle.net/imolorhe/2hra3794/

Answer 1

CSS变量是一种在呈现CSS样式时处理重复替换的工具-它们不是我们用来的普通变量。

请记住，这些是自定义属性，而不是实际变量   就像您在其他编程语言中可能会找到的一样。值是   在需要的地方进行计算，不存储用于其他规则。对于   例如，您不能为元素设置属性并期望   按照兄弟姐妹的后代规则检索它。仅设置该属性   匹配的选择器及其后代，就像任何普通的CSS一样。

MDN

基本上，您不能接受--header-bg和--dropdown-bg的值，以在重新定义变量--bg时进行更新-您必须重新定义它。

:root {
  --bg: #fff;
  --header-bg: var(--bg);
  --dropdown-bg: var(--bg);
}

/* create a new theme overriding the default */
.dark-theme {
  --bg: #ddd;
  /* redefine */
  --header-bg: var(--bg);
  --dropdown-bg: var(--bg);
}

.some {
  background: var(--bg);
}

.header {
  background: var(--header-bg);
}

.dropdown {
  background: var(--dropdown-bg);
}

<div class="header">My header</div>
<div class="some">content</div>
<div class="dropdown">Some random dropdown</div>

<br>

<div class="dark-theme">
  <div class="header">My header with black bg</div>
  <div class="some">content</div>
  <div class="dropdown">Some random dropdown with black background</div>
</div>

当原始变量更改时，将CSS变量重新分配给

1 个答案: