var() 其实已经出了很久了，它的使用方式也很简单，就是纯粹定义/使用变量，咋们废话不多说，来看看使用案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 在这里定义变量 */
:root{
--var-primary-color: red;
--var-cyan-color: blue;
}
.box{
width: 20px;
height: 20px;
/* 通过 var(变量名) 引入变量即红色 */
background: var(--var-primary-color);
}
</style>
</head>
<body>
<div class="box"></div>
<button onclick="onChange()">改变颜色</button>
<script type="text/javascript">
// 改变颜色
function onChange() {
// 通过 setProperty 函数将其 --var-primary-color 变量更改为绿色
document.documentElement.style.setProperty('--var-primary-color', 'orange')
// 你也可以用 var(--var-cyan-color) 的方式传递进去，它会自动转成对应的 blue
// document.documentElement.style.setProperty('--var-primary-color', 'var(--var-cyan-color)')
}
</script>
</body>
</html>
效果图
我们可以看到，定义了变量后，在利用 JS 提供的 API 去更改它的变量，这也是笔者最喜欢它的一点，像 sass 这种 css 预处理编译器是做不到的，另外，它也支持 UI 框架标签颜色属性传递，如 vant 框架里面的 slider 标签的 active-color 属性
<van-slider
class="slider"
v-model="state.currentSize"
:min="state.minSize"
:max="state.maxSize"
active-color='var(--var-primary-color)' 传递变量进去依然生效
/>
当然了，笔者最喜欢的是利用 var 来做 Theme(主题） 切换，但笔者就不在阐述啦，相信看到这里你能发现 var 的作用还是蛮多的，我们其实只需关心它能够通过 JS 动态改变就够了，具体使用场景得看实际需求。
Note
使用var并不代表完全抛弃sass，你也可以混合使用。