CSS变量：自定义属性（--*）

主要目的： CSS主题色

参考文章

developer.mozilla.org/zh-CN/docs/…*

带有前缀--的属性名，比如--example--name，表示的是带有值的自定义属性，其可以通过var()函数在全文档范围内复用的。 备注：自定义属性名区分大小写——--my-color会被视为与--My-color不同的自定义属性

/* 全局声明 */
:root {
  --first-color: #488cff;
  --second-color: #ffff8c;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

/* 其中var() 函数还能提供备选值（多个） 例如 var(--first-color, red, black) */

在JS中获取设置CSS变量值

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

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

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

另外JS还能检测浏览器是否支持css变量

window.CSS.supports('--a', 0)  // true or false

相应的在css中兼容不支持情况

@supports ( (--a: 0)) {
  /* supported */
}

@supports ( not (--a: 0)) {
  /* not supported */
}

最后还可以通过JS方法获取CSS变量内容

window.getComputedStyle(document.documentElement).getPropertyValue('--gr-default-space')

结果如下