CSS中关于变量的基本教程

}   
h2 {   
  color: #000000;   
  font-size: 36px;   
}  

:root伪类

我们需要一个地方来放置自定义属性。虽然可以在任何样式规则中指定自定义属性，但到处定义属性并不是一个好主意，这对CSS的可维护性和可阅读性是一个挑战。

:root 伪类代表了HTML文档的根元素，这是一个放置自定义属性的好位置，因为我们可以通过其他更具特异性的选择器来覆盖自定义属性值。
CSS变量的好处
可维护性

在一个Web开发项目中，我们经常重复使用一个特定的CSS属性值：

CSS Code复制内容到剪贴板

h1 {   
  margin-bottom: 20px;   
  font-size: 42px;   
  line-height: 120%;   
  color: gray;   
}   
p {   
  margin-bottom: 20px;   
  font-size: 18px;   
  line-height: 120%;   
  color: gray;   
}   
img {   
  margin-bottom: 20px;   
  border: 1px solid gray;   
}   
.callout {   
  margin-bottom: 20px;   
  border: 3px solid gray;   
  border-radius: 5px;   
}  

当需要改变某些属性值时，问题就会暴露出来了。
如果我们手动的改变属性值，尤其是当CSS文件很大时，不仅会花费大量时间，还可能会范一些错误。同样的，如果我们执行一个批处理查找和替换,就可能会无意中影响其他样式规则。
我们可以使用CSS变量重写：

CSS Code复制内容到剪贴板

:root {   
  –base-bottombottom-margin: 20px;   
  –base-line-height:   120%;   
  –text-color:         gray;   
}   
h1 {   
  margin-bottom: var( –base-bottombottom-margin );   
  font-size: 42px;   
  line-height: var( –base-line-height );   
  color: var( –text-color );   
}   
p {   
  margin-bottom: var( –base-bottombottom-margin );   
  font-size: 18px;   
  line-height: var( –base-line-height );