# 有没有使用过 css variable，它解决了哪些问题
Issue
欢迎在 Gtihub Issue 中回答此问题: Issue 185 (opens new window)
Author
css 变量减少样式重复定义，比如同一个颜色值要在多个地方重复使用，以前通过 less 和 sass 预处理做到，现在 css 变量也可以做到，方便维护，提高可读性
:root{
--bgcolor: blue;
--color: red;
}
p {
color: var(--color);
}
div {
backgroung-color: var(--bgcolor);
color: var(--color)
}
在媒体查询中使用，精简代码，减少冗余
.box {
--base-size: 10;
width: calc(var(--base-size)* 10px);
height: clac(var(--base-size)* 5px);
padding:calc(var(--base-size) * 1px);
}
@media screen and (min-width: 1480px) {
.box{
--base-size: 8;
}
}
方便在 js 中使用
// 设置变量
document.getElementById("box").style.setPropertyValue('--color', 'pink')
// 读取变量
doucment.getElementById('box').style.getPropertyValue('--color').trim() //pink
// 删除变量
document.getElementById('box').style.removeProperty('--color')
Author
可在运行时控制 CSS 逻辑，与 less/sass 相比，更加灵活，因为它很容易通过 JS 来控制。
补充两个用途：
- 可以减少 JavaScript 对 DOM 的介入，制作性能更高的动画
- 配合 content 等通过 CSS 给 JS 传参，得到一些通过 JavaScript 难以获取的参数
https://www.zhangxinxu.com/wordpress/tag/css-var/
Author
对浏览器兼容性有要求吗
Author
对浏览器兼容性有要求吗
现在主流浏览器都支持了，可以 MDN 或者 Can I use 里面自己查一下