查看原文

CSS Custom Properties，也叫 CSS Variables，是浏览器内建的功能，等价于 LESS / SASS 提供的变量功能。目前已有超过 77% 的浏览器支持这一特性。简单来说，它使用 --name: #fff 声明变量，使用 var(name) 获取值，在 JavaScript 中可以用 getComputedStyle(document.querySelector(el)).getPropertyValue('--name') 获取值。

可以使用 :root 声明全局 CSS Var，也可以将 --xyz: 10px 这种值写在任意一个 css 选择器里。Var 可以被复写，从而完成浏览器适配。：

:root { --default: #fff; }
media all and (max-width: 600px) { :root { --default: #ccc; }}
.alert { --default: #eee; }