从自述文件:
以下是库可以处理的一些示例:
:root {
--a: red;
}
p {
color: var(--a);
}
:root {
--a: var(--b);
--b: var(--c);
--c: red;
}
p {
color: var(--a);
}
:root {
--a: 1em;
--b: 2;
}
p {
font-size: calc(var(--a) * var(--b));
}
p {
font-size: var(--a, 1rem);
color: var(--b, var(--c, var(--d, red)));
}
<link rel="stylesheet" href="/absolute/path/to/style.css">
<link rel="stylesheet" href="../relative/path/to/style.css">
<style>
@import "/absolute/path/to/style.css";
@import "../relative/path/to/style.css";
</style>
<custom-element>
#shadow-root
<style>
.my-custom-element {
color: var(--test-color);
}
</style>
<div class="my-custom-element">Hello.</div>
</custom-element>
为了完整性:w3c规格
希望这可以帮助。