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

This question already has answers here:

CSS scoped custom property ignored when used to calculate variable in outer scope

                                    （1个答案）



                            Accessing global variable in css

                                    （3个答案）


                                在10个月前关闭。


我在项目中使用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/

最佳答案

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 - 当原始变量更改时，将CSS变量重新分配给，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54958699/

上一篇：html - 我怎样才能让某些字母在彼此上方直接对齐？

下一篇：html - 粘性页脚不适用于 Angular 5

相关文章：

c++ - 如何解释标准中的以下段落？

javascript - 全局 JavaScript 变量在对象构造函数的内部变得未定义

html - 使用 BootstrapCDN 更改配色方案

html - 仅CSS的砌体布局

html - 内联SVG到灰度

css - 如何使用媒体查询更改主机的CSS :( polymer )

python-3.x - Python - 为什么需要声明非局部和全局变量？

javascript - 暂停事件监听器

html - 用于在另一个元素之后或之前的元素的 CSS，未嵌套

CSS :first-child selector IE7