css 属性下的自定义值 - CSS答案

【问题标题】：Custom values under css property - CSScss 属性下的自定义值 - CSS
【发布时间】：2018-04-23 18:15:38
【问题描述】：

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

使用的大多数 HTML 标签都不是标准标签，我对 Angular 有一些了解，我们可以在其中定义自己的 HTML 标签。但我无法理解的是在 CSS 属性中传递一些自定义值。

喜欢这个：

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

有人知道这些东西是如何工作的吗？我只是想知道它，而不仅仅是背景。对于几个属性，我看到它下面有自定义值。我什至试图更深入一点，比如在检查器的元素下找到var(--yt-dialog-background)，但我找不到任何与var(--yt-dialog-background)对应的值

【问题讨论】：

【解决方案1】：

那些是CSS variables:

:root {
  --main-bg-color: green;
}

div {
  color: var(--main-bg-color);
}

<div>
  Some text
</div>

【讨论】：

【解决方案2】：

您看到的不是自定义值，而是原生 css 变量。

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

【讨论】：

【解决方案3】：

您看到的是原生的 css variables. Browser support is actually pretty good，这就是为什么您会看到它们被 YouTube 这样的网站用于生产。

基本用法如下：

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

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

【讨论】：