<body>
<div class="container">
<a href="">Link</a>
</div>
</body>
CSS
CSS Code复制内容到剪贴板
:root {
–highlight-color: yellow;
}
body {
–highlight-color: green;
}
.container {
–highlight-color: red;
}
a {
color: var( –highlight-color );
}
当移除.container规则时，链接的颜色值将是green。
回退值
当使用var()函数时，可以分配一个回退的属性值，其作为一个额外参数和第一个参数用,隔开。看下面的示例：
HTML
XML/HTML Code复制内容到剪贴板
<div class="box">A Box</div>
CSS
CSS Code复制内容到剪贴板
div {
–container-bg-color: black;
}
.box {
width: 100px;
height: 100px;
padding-top: 40px;
box-sizing: padding-box;
background-color: var( –container-bf-color, red );
color: white;
text-align: center;
}
因为给var()传递了一个回退值参数，所以div的背景色最中被渲染成红色。
无效值
谨防给CSS属性分配错误类型的值。
在下面的示例中，由于自定义属性–small-button被赋予一个长度单位，它被用在.small-button样式中是无效的(译者注：因为color的属性类型值出错)
CSS Code复制内容到剪贴板
:root {
–small-button: 200px;
}
.small-button {
color: var(–small-button);
}
避免这种情况的一个好方式是想出具有描述性的自定义属性名称。例如将上面的自定义属性命名为–small-button-width
浏览器对CSS变量的支持
CSS变量用起来很方便，但是浏览器对其支持情况不太好： 
