css 终于有了变量。我们可以用它来做一些很棒的事情。比如制作进度条，制作主题换肤等等。
关于 css 变量的介绍我推荐阮一峰老师的篇文章 CSS 变量教程
关于 css 变量的兼容性，大部分手机是不支持的，不过亲测在安卓下面的微信是支持的，至于iphone中的微信，由于手头没有苹果机，故兼容暂不知。
css 制作的进度条的效果图如下：
html代码：
<div class="box">
<input id="num" type="number" value="50" min="0" max="100">
<div class="progressbar"></div>
</div>
css 代码：
body {
display: flex;
height: 100vh;
}
.box {
margin: auto;
}
input {
border-radius: 4px;
margin-bottom: 20px;
width: 80px;
border: 1px solid teal;
}
.progressbar {
margin: auto;
height: 10px;
width: 100px;
border-radius: 4px;
background: #ccc linear-gradient(to right, red var(--scroll), transparent 0);
}
js 代码：
var progress = document.querySelector('.progressbar')
var num = document.querySelector('#num')
progress.style.setProperty('--scroll', num.value + '%')
num.oninput = e => {
progress.style.setProperty('--scroll', num.value + '%')
}
