开发过程中或多或少遇到过这样的问题。写css样式的时候，有很多都是通用样式，如果使用sass或less的话，非常好解决的。但单独只写css的时候。一旦遇到说需要改动一个颜色或者字号的大小的话就需要找到它并全局替换。
正常书写
.div1 {
background-color: blue;
color: #fff;
width: 50px;
height: 40px;
margin: 20px;
}
.div2 {
background-color: blue;
color: #fff;
width: 40px;
height: 80px;
margin: 20px;
}
.div3 {
background-color: blue;
color: #fff;
width: 60px;
height: 40px;
margin: 20px;
}
.div4 {
background-color: blue;
color: #fff;
width: 70px;
height: 30px;
margin: 20px;
}<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>可以看出上面的背景颜色和字体颜色是相同的。如果需要更改颜色那就都需要更改，替换。有什么更好的方式么？
答案当然是：有
CSS的自定义属性(变量)
自定义属性（有时候也被称作 CSS变量或者 级联变量）是由CSS作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如：--main-color: black;），由 var() 函数来获取值（比如：color: var(--main-color) ;）复杂的网站都会有大量的CSS代码，通常也会有许多重复的值。举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换（很麻烦哎～）。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。另一个好处是语义化的标识。比如，
--main-text-color会比#00ff00更易理解，尤其是这个颜色值在其他上下文中也被使用到。自定义属性受级联的约束，并从其父级继承其值。
基本用法
// 声明
:root {
--bg-color: blue;
--text-color: white;
}
>
// 使用
.div1 {
background-color: var(--bg-color);
color: var(--text-color);
width: 50px;
height: 40px;
margin: 20px;
}
.div2 {
background-color: var(--bg-color);
color: var(--text-color);
width: 40px;
height: 80px;
margin: 20px;
}
.div3 {
background-color: var(--bg-color);
color: var(--text-color);
width: 60px;
height: 40px;
margin: 20px;
}
.div4 {
background-color: var(--bg-color);
color: var(--text-color);
width: 70px;
height: 30px;
margin: 20px;
}更改后效果是一样的,如果需要更改背景色只需要更改变量的值即可：
:root {
--bg-color: hotpink;
--text-color: black
}
注意，规则集所指定的选择器定义了自定义属性的可见作用域。通常的最佳实践是定义在根伪类:root下，这样就可以在HTML文档的任何地方访问到它了自定义属性名是大小写敏感的，
--my-color和--My-color会被认为是两个不同的自定义属性。
