CSS自定义属性在链接的CSS文档中是全局的吗？ [英] Are CSS Custom Properties global across linked CSS documents?
问题描述
我正在尝试使用CSS3自定义属性（又称CSS变量）取得很多成功。我说的是-black：＃000; 和 background：var（-black）; 类型变量。但是，当变量在单独的链接文档中声明时，我很不走运。
I'm experimenting with a lot of success with CSS3 Custom Properties (aka CSS Variables). I'm talking about the --black: #000; and background: var(--black); type variables. However, I'm having no luck when variables are declared in separate linked documents.
CSS自定义属性的浏览器兼容性超过72％（src： https://caniuse.com/#search=css%20variables ），我很想开始使用它们在一个非常特定的应用程序中，我知道我的听众正在使用兼容的浏览器。
With CSS Custom Properties being at over 72% browser compatibility (src: https://caniuse.com/#search=css%20variables), I'm keen to start using them in a very specific app where I know my audience are using compatible browsers.
我想知道这些CSS自定义属性在所有链接的CSS文档中是否是全局范围的？它们只是每个文档的全局文件（在：root 元素处）？
I'm wondering whether these CSS Custom Properties are global in scope across all linked CSS documents or whether they are only global (at the :root element) per document?
我找不到答案（即使在规范中也是如此）！
I'm not able to find an answer (even in the spec)!
我读过一些研究报告：
- https://drafts.csswg.org/css-variables/#defining-variables
- http://www.javascriptkit.com/dhtmltutors/css-variables-tutorial.shtml
- https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties
- https://css-tricks.com/ css-custom-properties-theming
- https://www.sitepoint.com/practical-guide-css-variables-custom-properties
- https://www.toptal.com/front-end/dynamic-css-with-custom-properties
- https：// googlechrome。 github.io/samples/css-custom-properties/
- https://tympanus.net/codrops/css_reference/custom-properties/
- https://drafts.csswg.org/css-variables/#defining-variables
- http://www.javascriptkit.com/dhtmltutors/css-variables-tutorial.shtml
- https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties
- https://css-tricks.com/css-custom-properties-theming
- https://www.sitepoint.com/practical-guide-css-variables-custom-properties
- https://www.toptal.com/front-end/dynamic-css-with-custom-properties
- https://googlechrome.github.io/samples/css-custom-properties/
- https://tympanus.net/codrops/css_reference/custom-properties/
我的特定问题发生在Ruby on Rails应用程序中，其中我将CSS自定义属性包含在< style> 块位于SCSS样式表之前，其中包括要在部署时对其进行预编译。如果我将变量包括在SCSS的顶部，则一切正常。但是< style> 块将包含主题变量，并且需要由ERB在运行时进行编译。
My specific problem is occurring in a Ruby on Rails application, where I'm including the CSS Custom Properties in a <style> block ahead of an SCSS stylesheet include which when deployed is to be pre-compiled. If I include the variables at the top of the SCSS, everything works just fine. However the <style> block is to contain theme variables and needs to be compiled by ERB at runtime.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
:root {
--primary-color: #000;
}
</style>
<%= stylesheet_link_tag 'application', media: 'all' %>
</head>
</html>
推荐答案
在 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：。
It works just like any other CSS properties. It should be declared in the ancestor of the target element. So usually it would be declared to the top-level element html or root:.
CSS自定义属性是在外部CSS文件中声明还是在同一文件中都没有关系。
It does not matter whether CSS custom properties are declared in an external CSS file or the same file.
以下是使用两个示例外部CSS文件。它可以在Firefox，Safari和Chrome上运行。
The following is a sample using two external CSS files. It works on Firefox, Safari and Chrome.
https://thatseeyou.github.io/css3-examples/basics/customproperty.html
变量.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文档中是全局的吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
