CSS变量

　　2016年CSS变量已经完整在Chrome FireFox和IE中使用，类似许多Javascript和CSS新特性，可能你很难想象如何使用CSS变量，我们所有经验都来自于无变量的世界，这里我们从如何使用CSS变量进行Javascript和CSS通讯讲起。

CSS变量增加了CSS两个新概念，你能够使用两个连接号“--”作为开头定义定制的属性：

html {    --main-color: #06c  }

这里两个“--”是作为main-color开始，这定义了一个CSS变量，那么以后我们就可以引用这个变量名main-color:

a {    color: var(--main-color)  }

这样你能方便在一个地方改变颜色大小等属性。

有趣的是，CSS变量遵循CSS属性的继承规则，比如也许我们想在blog中调整main color:

.blog-post {    --main-color: #9b806b  }

结合CSS变量和calc()表达式会有惊人的效果：

html {    --header-height: 40px  }    
.page-content {
    top: calc(var(--header-height) + 10px)  
}

CSS变量能够让我们通过Javascript更好地控制CSS数值，比如：

.my-element {    height: var(--element-height);    width: 40px;    color: #9b806b;  }

在Javascript中，我们能够将CSS变量设置为我们想要的值：

myElement.style.setProperty('--element-height', height + 'px')

再比如结合calc：

.my-element {    height: calc(var(--element-height) * 1px);  }

那么在javascript中设置CSS变量:

myElement.style.setProperty('--element-height', height)

以上展示了如何通过CSS变量实现Javascript和样式之间的通讯互相调用。