CSS 变量

CSS 原生支持变量

不需要 各种预编译器 

放 mdn 链接 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties   直接点 

个人喜欢用 :root  

 :root 伪类上设置自定义属性，然后在整个文档需要的地方使用，可以减少这样的重复性：

:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

在 JavaScript 中使用

在 JavaScript 中获取或者修改 CSS  变量和操作普通 CSS 属性是一样的：

// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");

// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");

// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);