CSS 变量声明和修改

CSS变量的声明

CSS 变量的声明一般都是在根元素上面声明，确保根元素下的所有元素都可以访问到这个 CSS 的自定义属性。这里根元素使用 :root 来表示，也可以在其他元素上面声明自定义属性，比如 div、p… 标签，如果是在非根元素下声明的 CSS 属性，则只能在当前声明元素上使用。

:root {
  --brand-color: #3C50E0;
}

CSS变量的使用 

// 使用根元素的变量
    div {
      color: var(--brand-color);
    }
 // 使用标签内的变量
    p {
      color: var(--brand-color);
    }
// 当我们无法取到某个 CSS 变量时, var 方法的第二个参数会成为他的值
    span {
      color: var(--brand-color, blue)
    }

CSS变量的修改

document.documentElement.style.getPropertyValue('--brand-color') 
document.documentElement.style.setProperty('--brand-color', 'green') // --brand-color ==> green