:root {
--main-color: blue;
当你给任意在<html>标签里的元素指定--main-color变量时，它们都会继承到blue这个值。
当你在另一个元素里，为改自定义属性设置了一个新值时，那么所有该元素的子元素都会继承那个新值。例如：
:root {
--main-color: blue;
.alert {
--main-color: red;
color: var(--main-color);
<--! HTML -->
<!-- head code here -->
</head>
<p>blue 的段落</p>
<div class="alert">
<p>red 的段落</p>
</body>
</html>
在上面的标签中，第一个p段落会继承到全局的--main-color值，它是蓝色。
在div标签中拥有.alert类的段落会是红色，因为它的值继承自局部作用域里的--main-color。
如何通过JavaScript操作CSS变量
另一个超级酷的事情就是，你可以直接通过JavaScript代码访问CSS变量。
假设在你的CSS文件中，有一个叫做--left-pos的变量，作用在.sidebar选择器中，值为100px：
.sidebar {
--left-pos: 100px;
那么，通过JavaScript获取--left-pos值，会像下面这样：
// 缓存你即将操纵的元素
const sidebarElement = document.querySelector('.sidebar');
// 缓存sidebarElement的样式于cssStyles中
const cssStyles = getComputedStyle(sidebarElement);
// 获取 --left-pos CSS变量的值
const cssVal = String(cssStyles.getPropertyValue('--left-pos')).trim();
// 将CSS 变量的值打印到控制台: 100px
console.log(cssVal);
如果想通过JavaScript设置CSS变量的值，你可以像这样：
sidebarElement.style.setProperty('--left-pos', '200px');
上面的代码将sidebar元素中--left-pos变量的值设置为200px。
CSS变量的浏览器支持
除了IE11（它不支持CSS变量），所有主流浏览器都对CSS变量有全面地支持。
对于不支持CSS变量的浏览器，一个变通的方案是使用具有虚拟查询条件(dummy conditional query)的@supports代码块:
section {
color: gray;
@supports(--css: variables) {
section {
--my-color: blue;
color: var(--my-color, 'blue');
考虑到@supports在IE/Edge里也起作用，上面的方法是可行的。如果你在val()函数中使用了备用值，那么你的代码将更加可靠，它能在兼容性不好的浏览器中实现优雅降级。
对于上面的代码，在Chrome和其他支持CSS变量的浏览器中，<section>标签里的文本将是蓝色：
在IE11中，由于它不支持CSS变量，页面将显示灰色文本:
此方法的一个缺点是，如果你大量使用CSS变量，而那些不支持CSS变量的浏览器在你的项目中有很高的适配优先级，那么相应的代码会变得很复杂，对于维护来说，甚至是噩梦。
在这种情况下，你可以选择使用带有cssnext的PostCSS，它能让你在CSS代码中使用最新的特性，并且让原本不支持这些属性的浏览器，也能运行这些代码（有点像JavaScript转换器做的事情）。
