一、css变量
body {
--foo: #7F593F;
--urls: './img/xxx.jpg';
}变量的名称可以用数字、汉字等，不能包含**$，[，^，(，%**等字符，变量的值也是可以使用各种属性值：
如：
// 定义css变量
:root{
--黑色背景: #3a6b5c;
--255: rgb(256, 256, 256);
--pd: 10px 20px;
--height: 200px;
--transition-duration: .36s;
--margin-top: calc(2vh + 20px);
}
// 使用css变量
div{
color: var(--256);
margin-top: var(--margin-top);
padding: var(--pd);
width: var(--height);
height: var(--height);
background-color: var(--黑色背景, #000);
}:root是CSS 伪类匹配文档树的根元素。
对于 HTML 来说，:root 表示 元素，除了优先级更高之外，与 html 选择器相同二 、var()函数使用
:root {
--黑色背景: #3a6b5c;
}
body {
background-color: var(--黑色背景, #000);
}如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。
:root {
--黑色背景: #3a6b5c;
}
body {
background-color: var(--黑色背景, #000);
}三、复杂的CSS3 calc()计算
body {
--col: 4;
--margins: calc(24px / var(--col));
}四、JavaScript 操作 CSS 变量的写法如下。
// 设置变量
document.body.style.setProperty('--黑色主题', '#7F583F');
// 读取变量
document.body.style.getPropertyValue('--黑色主题').trim();
// '#7F583F'
// 删除变量
document.body.style.removeProperty('--黑色主题');