最近太无聊，研究下CSS，发现了css可以自定义变量，是我跟不上时代的步伐了嘛？这可不行，我还是要紧跟上的。就了解了下。
总结下方便以后忘记了回顾。
这个写法的好处可能是减少了css代码冗余的问题吧
1.声明自定义变量，CSS中变量的定义方法是以两个“破折号”开头，后面跟变量名
:root{
--main-color:#54BBCE;
}
估计大家会问为啥用:root?
因为用:root能够在整个文档中访问它。如果我们只在特定的选择器中定义变量，那么只对那个选择器可用。
2.使用自定义变量，我们要用到关键字var()，var关键字有两个参数。第一个是要替换的自定义属性的名称，第二个是回退值，在引用的自定义属性无效时使用。
p{
color: var(--main-color);
background-color: var(--main-colors, #999AAA);
}
p{
font-size: var(--main-color, 30px);
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简洁css</title>
<style>
/*
声明自定义变量
CSS中变量的定义方法是以两个“破折号”开头，后面跟变量名
*/
:root{
--main-color:#54BBCE;
}
/**
使用自定义变量
*/
p{
color: var(--main-color);
}
</style>
</head>
<body>
<p>css变量</p>
</body>
</html>
