Dom*_*Dom 15 css css3 css-variables
我正在尝试使用CSS3自定义属性(又名CSS变量)取得很大成功.我在谈论--black: #000;和background: var(--black);类型变量.但是,当变量在单独的链接文档中声明时,我没有运气.
随着CSS自定义属性超过72%的浏览器兼容性(src:https://caniuse.com/#search=css%20variables),我很想开始在一个非常特定的应用程序中使用它们,我知道我的观众正在使用它们兼容浏览器.
我想知道这些CSS自定义属性是否在所有链接的CSS文档中都是全局的,或者它们是否只是:root每个文档的全局(在元素中)？
我无法找到答案(即使在规范中)!
我读到的一些研究:
我的具体问题发生在Ruby on Rails应用程序中,其中我将CSS自定义属性包含在<style>SCSS样式表之前的块中,其中包括部署时要预编译的样式.如果我将变量包含在SCSS的顶部,一切正常.但是该<style>块包含主题变量,需要在运行时由ERB编译.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
:root {
--primary-color: #000;
}
</style>
<%= stylesheet_link_tag 'application', media: 'all' %>
</head>
</html>
tha*_*you 19
在MDN:
自定义属性参与级联:它们中的每一个都可以出现多次,并且变量的值将匹配由级联算法决定的自定义属性中定义的值.
它就像任何其他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>