如何在CSS中使用变量
在使用CSS变量的时候, 应该知道的三个主要内容
- 自定义属性
- var()函数
- :root伪类
一 自定义属性
我们可以将重复使用的属性定义成自定义属性, 这样在以后需要修改的时候, 只需要修改自定义属性里的属性值就可以了.
:root {
--textColor: #444;
}
上面的代码就是自定义属性的写法, 需要注意的是, 自定义属性以 -- 开头
二 var()函数
我们需要使用var()函数来读取变量, 否则浏览器不知道你的自定义属性是啥东东.
var()函数还可以指定第二个属性, 表示属性的默认值
p {
color: var(--textColor);
}
要设置p标签的字体颜色, 可以像上面代码那样写
它跟 p { color: #444; } 这样是一样的
三 root伪类
在说:root伪类之前, 要先说一下CSS自定义属性的作用域问题
同一个CSS自定义属性, 可以在多个选择器中声明, 读取的时候, 优先级最高的属性生效.
body {
--bgColor: red;
}
.content {
--textColor: blue;
}
上面的代码, -bgColor的作用域是body, --textColor的作用域是.content 由于这个原因, 最好把自定义属性放在根元素:root里面, 这样的话能保证任何选择器都能读取他们.