方法的第一个参数是要替换的自定义属性的名称。函数的可选第二个参数用作回退值。如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。
如果您不确定是否已定义自定义属性并且想要提供用作回退的值，则可以执行此操作。
例如：
color: var(–foo, red, blue); //将red, blue同时指定为回退值；即是说任何在第一个逗号之后到函数结尾前的值都会被考虑为回退值。
padding: var(--box-padding, var(--main-padding));calc()函数
由于我们习惯使用预处理器和其他语言，我们希望在处理变量时能够使用基本运算符。 为此，CSS提供了一个calc（）函数，它使浏览器在对自定义属性的值进行任何更改后重新计算表达式：
:root{
--indent-size: 10px; --indent-xl: calc(2*var(--indent-size));
--indent-l: calc(var(--indent-size) + 2px);
--indent-s: calc(var(--indent-size) - 2px);
--indent-xs: calc(var(--indent-size)/2);
}
如果您尝试使用无单位值，则使用calc()函数可以带来很大的方便：
:root{
--spacer: 10;
}
.box{
padding: var(--spacer)px 0; /* DOESN'T work */
padding: calc(var(--spacer)*1px) 0; /* WORKS */
}css自定义属性的scop
自定义属性也遵守CSS层叠规则。
2* 利用js使用css自定义属性
假设您有一个名为 –left-pos 的 CSS 变量，其值为 100px，范围为 CSS 文档中的 .sidebar 类：
.sidebar {
--left-pos: 100px;
}可以通过如下方式获取 –left-pos 的值：
const sidebarElement = document.querySelector('.sidebar');
const cssStyles = getComputedStyle(sidebarElement);
const cssVal = String(cssStyles.getPropertyValue('--left-pos')).trim();
console.log(cssVal); //100px设置css属性值：
sidebarElement.style.setProperty('--left-pos', '200px');3* css 变量和预处理变量有什么不同？
在样式化网站时，您可能通过使用Sass和Less等预处理器来使得变量的更具有灵活性。
预处理器允许您设置变量，并在函数，循环，数学运算等中使用它们。这是否意味着CSS变量无关紧要？
不完全是，主要是因为CSS变量与预处理器变量不同。
差异源于CSS变量是在浏览器中运行的真正的CSS属性，而预处理器变量需要被编译成常规CSS代码，因此浏览器对它们一无所知。
这意味着您可以更新样式表文档中的CSS变量，内联样式属性和SVG表示属性，或者选择使用JavaScript 动态 操作它们。对于 CSS 自定义属性的修改，会立马传递到使用到他的地方，而预处理器则无法完成这种行为，因为他们是提前已经编译好了的！
