CSS 自定义属性在链接的 CSS 文档中是全局的吗？

Question

我正在试验 CSS3 自定义属性（又名 CSS 变量）并取得了很多成功。我说的是 --black: #000; 和 background: var(--black); 类型变量。但是，当在单独的链接文档中声明变量时，我运气不好。

由于 CSS 自定义属性的浏览器兼容性超过 72%（来源：https://caniuse.com/#search=css%20variables），我很想在我知道我的观众正在使用的非常具体的应用程序中开始使用它们兼容的浏览器。

我想知道这些 CSS 自定义属性在所有链接的 CSS 文档中是否在全局范围内，或者它们是否仅在每个文档中是全局的（在 :root 元素处）？

我找不到答案（即使在规范中）！

我阅读的一些研究：

我的具体问题发生在 Rails 应用程序的 Ruby 中，我在 S 之前的 <style> 块中包含 CSS 自定义属性CSS 样式表包括部署时要预编译的样式表。如果我在 SCSS 的顶部包含变量，则一切正常。但是 <style> 块是包含主题变量，需要在运行时由 ERB 编译。

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      :root {
        --primary-color: #000;
      }
    </style>
    <%= stylesheet_link_tag 'application', media: 'all' %>
  </head>
</html>

Answer 1

在MDN中：

Custom properties participate in the cascade: each of them can appear several times, and the value of the variable will match the value defined in the custom property decided by the cascading algorithm.

它的工作方式与任何其他 CSS 属性一样。它应该在目标元素的祖先中声明。所以通常它会声明到顶级元素 html 或 root:.

CSS 自定义属性是在外部 CSS 文件还是在同一文件中声明都没有关系。

以下是使用两个外部 CSS 文件的示例。它适用于 Firefox、Safari 和 Chrome.

https://thatseeyou.github.io/css3-examples/basics/customproperty.html

variables.css :

:root {
    --red: #f00;
    --green: #0f0;
    --blue: #00f;
}

style.css :

.red {
    background-color: var(--red);
}
.green {
    background-color: var(--green);
}
.blue {
    background-color: var(--blue);
}

HTML :

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="customproperty/variables.css" rel="stylesheet">
        <link href="customproperty/style.css" rel="stylesheet">
        <style>
            .module {
                --red: #800;
                --green: #080;
                --blue: #008;
            }
        </style>
    </head>
    <body>
        <div class="red">red</div>
        <div class="green">green</div>
        <div class="blue">blue</div>
        <div class="module">
            <div class="red">red in module</div>
            <div class="green">green in module</div>
            <div class="blue">blue in module</div>
        <div>
    </body>
</html>

CSS 自定义属性在链接的 CSS 文档中是全局的吗？

Are CSS Custom Properties global across linked CSS documents?

css

css-variables