css var()
更新时间: 2023-02-08 09:40:12
前两天春节复工后一直在改之前已经做好的项目的css样式，就改到了别人写的，其中css中有个var()的用法我很陌生，我的错，前端入行多年，css相关知识还是之前的版本，是该重新好好学学了。
# css变量
css变量可以有全局或局部作用域。 全局变量可以在整过文档中进行访问和使用，而局部变量只能在声明它的选择器内部使用。
注意
变量名称必须以两个破折号(--)开头，切区分大小写！
# 全局变量
创建全局作用域变量，请在:root选择器中声明它。:root选择器匹配文档的根元素。
:root {
--blue: #1e90ff;
--white: #ffffff;
}
1
2
3
4
2
3
4
# 局部变量
创建局部作用域的变量，请在将要使用它的选择器中声明它。
.example {
--green: #00ff00;
--blue: #0000ff;
}
1
2
3
4
2
3
4
# var()函数
var()函数的作用是插入css变量的值。
# 语法
var(name, value)
1
| 值 | 描述 |
|---|---|
| name | 必须。变量名(以两条破折号开头) |
| value | 可选。回退值(在未找到变量时使用) |
# 实例
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.example{
color:var(--white);
background-color:var(--blue);
padding:15px;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
运行结果如下所示：
HI~
# 覆盖变量
有时，我们希望变量仅在页面的特定部分中进行更改。 假设我们想要按钮元素使用不同的蓝色。那么，我们可以在button选择器内重新声明--blue变量。当我们在这个选择器中使用var(--blue)时，它将使用此处声明的局部--blue变量。
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.button1 {
--blue:#0000ff;
background-color:var(--blue);
color:var(--white);
padding: 5px;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
可以看到下面button使用的蓝色是局部变量中定义的蓝色