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>

09-25 22:31
查看更多