如何在CSS中使用变量

日常的开发中，常用的CSS变量, 主要有如下三个：

• 自定义属性
• var()函数
• :root伪类

1. 自定义属性

我们可以将重复使用的属性定义成自定义属性, 这样在以后需要修改的时候, 只需要修改自定义属性里的属性值就可以了.

:root {
　　--textColor: #444;
}

上面的代码就是自定义属性的写法, 需要注意的是, 自定义属性以 -- 开头

2. var()函数

一般需要使用var()函数来读取变量, 否则浏览器不知道你的自定义属性表示什么。

var()函数还可以指定第二个属性, 表示属性的默认值

p {
　　color: var(--textColor);
}

要设置p标签的字体颜色, 可以像上面代码那样写

效果同： p { color: #444; } 一样。

3. root伪类

介绍:root伪类之前, 要先了解一下CSS自定义属性的作用域问题；

在同一个CSS自定义属性, 可以在多个选择器中声明, 读取的时候, 优先级最高的属性生效。

body {
　　--bgColor: red;
}

.content {
　　--textColor: blue;
}

以上代码分析：

-bgColor：的作用域是body

--textColor：的作用域是.content

由于该原因,  建议把自定义属性放在根元素:root里面, 这样能保证任何选择器都能够读取他们.