2017年三月，微软宣布edge正式支持了css变量，至此市面上所有主流的浏览器都支持了css变量。
变量声明
在变量名前面加上--即可
这里在body里面声明了color1 color2两个变量。它们实质上就是属性，但是没有默认含义。故而css变量又称之为css自定义属性。
1
2
3
4
| body {
--color1: #111;
--color2: #222;
}
|
注意：变量名大小写敏感。
1
2
3
4
| :root {
--font-color: #3a3a3a;
--block-color: #333333;
}
|
这里:root匹配DOM根元素，对于html而言就是匹配<html>元素
var()函数
用于读取变量：
1
2
3
4
| a {
color: var(--font-color);
background-color: var(--block-color);
}
|
第二参数：
1
2
3
| a {
color: var(--font-color,#333);
}
|
如果第一个变量不存在则使用第二个参数。
注意：第一个参数逗号之后的部分都属于第二个参数整体。
var()还可以用在变量的声明：
1
2
3
4
| a {
--first-color: #333;
--second-color: var(--first-color);
}
|
注意：var()是一个属性值。
变量值类型
字符串
1
2
3
4
| a {
--foo: 'hello';
--bar: var(--foo)' world';
}
|
结果： --bar = 'hello world'。
数值
- 变量值没有单位
需要使用到calc()函数，这里注意calc()函数内符号两边要留空格。
1
2
3
4
| p {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}
|
- 变量值有单位
1
2
3
4
| p {
--gap: 20px;
margin-top: var(--gap);
}
|
作用域
同一个css变量可以在多个选择器中被声明，按照css层叠来选择优先级最高的声明。
总结：css变量的作用域就是声明其的选择器的范围，并且按照层叠，优先级越高的作用越优先。
一般将css全局变量放在:root中，以使得所有选择器都可读取。
1
2
3
4
5
| :root {
--font-color: #000;
--block-color: blue;
--border-color: red;
}
|
响应式布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| body {
--primary: #7F583F;
--secondary: #F7EFD2;
}
a {
color: var(--primary);
text-decoration-color: var(--secondary);
}
@media screen and (min-width: 768px) {
body {
--primary: #F7EFD2;
--secondary: #7F583F;
}
}
|
这样，窗口宽度在大于等于768px的时候采用:
1
2
3
4
| body {
--primary: #F7EFD2;
--secondary: #7F583F;
}
|
其他情况采用：
1
2
3
4
| body {
--primary: #7F583F;
--secondary: #F7EFD2;
}
|
而a标签是公共样式：
1
2
3
4
| a {
color: var(--primary);
text-decoration-color: var(--secondary);
}
|
兼容
如果浏览器不支持css变量，则：
1
2
3
4
5
| a {
--main-color: #333;
color: #333;
color: var(--main-color);
}
|
或者使用@supports检测：
1
2
3
4
5
6
7
| @supports ( (--a: 0) ) {
}
@supports ( not (--a: 0) ) {
}
|
js检测浏览器是否支持css变量
1
2
3
4
5
6
7
| const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0);
if (isSupported) {
} else {
}
|
JavaScript 操作 CSS 变量的写法如下。
1
2
3
4
5
6
7
8
9
|
document.body.style.setProperty('--primary', '#7F583F');
document.body.style.getPropertyValue('--primary').trim();
document.body.style.removeProperty('--primary');
|
css变量提供了一种css与js通信的方式：
1
2
3
| div {
--msg: if (x === 1) { this.width = 10};
}
|
这个--msg变量的值在css中是无效的，但是我们通过js可以读取到它，变相让css传值给了js。
