为什么想到要写这篇文章呢，今天在掘金上面看到老姚的沸点“使用渐变，一个div实现进度条”，仔细看了一下内容代码才发现在css中存在的自定义变量语法，自己一直没有用过，哈哈哈！
使用渐变，一个div实现进度条
首先我们亮出老姚的代码，使用渐变，一个div实现进度条
div {
--c: #0ff;
--p: 60%;
height: 60px;
background-color:silver;
border-radius: 30px;
background-image: radial-gradient(closest-side circle at var(--p), var(--c),var(--c) 100%,transparent),linear-gradient(var(--c), var(--c));
background-size: 100%,var(--p);
background-repeat: no-repeat;
}
可以看出我们可以直接修改变量--c来修改进度条的颜色，
css自定义变量语法--*
首先看一下css自定义变量的使用方法和场景
:root{
--white-max: #fff;
--white-bright: #f5f5f5;
--white-light: #eee;
--white-dark: #ddd;
}
.menu ul>li>a{
color: var(--white-max);
font-size: 1.1em;
font-weight: bold;
}
.menu a:hover{
color: var(--white-max);
}
:root
文档的根元素，这是一个放自定义属性的好地方，因为我们可以根据其他个别特别的样式的选择性来覆盖自定义属性；
var()
CSS中原生的变量定义语法是：--*，变量使用语法是：var(--*)，其中*表示我们的变量名称。关于命名这个东西，各种语言都有些显示，例如CSS选择器不能是数字开头，JS中的变量是不能直接数值的，但是，在CSS变量中，这些限制通通没有。
不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合，但是可以是中文，日文或者韩文
特点
- 可以使用中文命名
:root{
--白色: #fff
}
.header {
color: var(--白色)
}
- 可以使用数字命名
:root{
--1: #fff
}
.header {
color: var(--1)
}
- 无论是变量的定义和使用只能在声明块{}里面
--白色: #fff;
body {
background-color: var(--白色);
}
自定义变量权重问题
:root { --color: purple; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
<p>我的紫色继承于根元素</p>
<div>我的绿色来自直接设置</div>
<div id='alert'>
ID选择器权重更高，因此阿拉是红色！
<p>我也是红色，占了继承的光</p>
</div>
我们可以看一下上面的运行效果。
- 变量也是跟着CSS选择器走的，如果变量所在的选择器和使用变量的元素没有交集，是没有效果的。例如#alert定义的变量，只有id为alert的元素才能享有。如果你想变量全局使用，则你可以设置在:root选择器上；
- 当存在多个同样名称的变量时候，变量的覆盖规则由CSS选择器的权重决定的，但并无!important这种用法，因为没有必要，!important设计初衷是干掉JS的style设置，但对于变量的定义则没有这样的需求。
CSS变量使用完整语法
CSS变量使用的完整语法为：var( [, ]? )，用中文表示就是：var( <自定义属性名> [, <默认值 ]? )。 意思就是，如果我们使用的变量没有定义（注意，仅限于没有定义），则使用后面的值作为元素的属性值。举个例子：
.header {
--1: #369;
}
body {
background-color: var(--1, #cd0000);
}
此时body的背景颜色是#cd0000;因为--1没有定义，如果要使用#369,我们可以把--1定义在:root中。
文末看一个例子：
header {
--color: 20px;
background-color: #999;
background-color: var(--color, #cd0000);
}
请问，此时
的背景色是？A. transparent B. 20px C. #369 D. #cd0000 留言写下你的答案吧。
