Javascript css属性下的自定义值-css

我刚刚在youtube上播放了一些视频，突然我对检查youtube的HTML结构感到好奇。我注意到一些很酷的事情正在发生

使用的大多数HTML标记都不是标准标记，我对如何定义我们自己的HTML标记有一些了解。但我不理解的是在CSS属性中传递一些自定义值

像这个：

background: var(--yt-dialog-background);

---

有人知道这些东西是怎么工作的吗？我只是想知道，这不仅仅是背景。对于几个属性，我看到它下面有自定义值。我甚至试着更深入一点，比如在inspector中的元素下找到

var（-yt dialog background）

，但是我找不到任何与

var（-yt dialog background）

对应的值，你看到的是本机，这就是为什么你看到他们被YouTube这样的网站用于制作

基本用途如下所示：

:root {
    --main-color: red;
}

h1 {
    color: var(--main-color);
}

---

您看到的不是自定义值，而是本机css变量

对现代浏览器的支持非常好：

这些是：

：根目录{
--主背景颜色：绿色；
}
div{
颜色：var（--主背景颜色）；
}

一些文本

这个问题在我看来相当宽泛，但这可能会让你开始：但那些预处理器将自己的语法转换为常规CSS，除非我弄错了。变量名本身是如何进入检查器的？您可能需要检查MDN文档，这太酷了。我从来不知道CSS有变量。我在CSS中使用SASS。但是这些变量比我在SASS中使用的变量有什么优势？@UnknownUser是的，您可以通过Javascript更改这些变量的值。请参阅我链接的MDN文章中的最后一个示例。