CSS 变量和自定义属性——它们是如何工作的？答案

【问题标题】：CSS variables and custom properties - How do they work?CSS 变量和自定义属性——它们是如何工作的？
【发布时间】：2021-06-05 06:10:07
【问题描述】：

动态文本颜色.css

:root {
   --title-color: #555555;
}

.text-title-color {
    color: var(--title-color);
}

.bg-blue-100 {
   --title-color: #999999;
}

.bg-blue-200 {
   --title-color: #888888;
}

.bg-blue-300 {
   --title-color: #777777;
}

index.html

 <div class="bg-blue-100">
      <h1 class="text-title-color">I am colored #999999</h1> 
 </div>
      
 <div class="bg-blue-200">
      <h1 class="text-title-color">I am colored #888888</h1> 
 </div>

 <div class="bg-blue-300">
      <h1 class="text-title-color">I am colored #777777</h1> 
 </div>

问题：

我不明白允许每个 h1 具有不同颜色的过程。在这种情况下，我不明白“text-title-color”的值如何根据背景颜色而有所不同。

“自定义属性的范围仅限于声明它们的元素，并参与级联：此类自定义属性的值是由级联算法决定的声明的值。” - https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

根据上面 Mozilla 对自定义 props 的解释，每个变量的作用域都是其贴花的元素。因此，浏览器会如何将代码转换为类似的东西，如果是的话，下面的代码存储在哪里？：

.bg-blue-100 .text-title-color{
      color: #999999
}

.bg-blue-200 .text-title-color{
      color: #888888
}

.bg-blue-300 .text-title-color{
      color: #777777
}

【问题讨论】：

color: --title-color; 必须是 color: var(--title-color);

标签： css sass css-variables

【解决方案1】：

浏览器不需要按照你描述的方式做任何转换

变量都是它所理解的部分。

它不像预处理器，必须在运行之前将所有内容转换为“真正的”CSS。

当浏览器必须渲染一个 h1 时，比如说，在你的问题中，它会从任何相关的样式中获取 --title-color 的值。就像它会拾取，比如说，如果它们被设置在那里，颜色或宽度。

CSS 变量的值正是因为它们可以在运行时设置，例如通过 Javascript 对某些用户操作进行操作，新值将“即时”使用。

【讨论】：